Lo he intentado muchas veces para hacer esto, pero todavía no ha funcionado.¿Cómo crear un cuadro cuando el mouse sobre texto en CSS puro?
Cuando ratón sobre este texto
Entonces me debe mostrar esta caja
que quiero lograr este efecto puramente con CSS si alguien puede hacer esto.
Usted puede escribir así:
CSS
span{
background: none repeat scroll 0 0 #F8F8F8;
border: 5px solid #DFDFDF;
color: #717171;
font-size: 13px;
height: 30px;
letter-spacing: 1px;
line-height: 30px;
margin: 0 auto;
position: relative;
text-align: center;
text-transform: uppercase;
top: -80px;
left:-30px;
display:none;
padding:0 20px;
}
span:after{
content:'';
position:absolute;
bottom:-10px;
width:10px;
height:10px;
border-bottom:5px solid #dfdfdf;
border-right:5px solid #dfdfdf;
background:#f8f8f8;
left:50%;
margin-left:-5px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
p{
margin:100px;
float:left;
position:relative;
cursor:pointer;
}
p:hover span{
display:block;
}
HTML
<p>Hover here<span>some text here ?</span></p>
Marque esta http://jsfiddle.net/UNs9J/1/
woah, eso está bien :) ¿Sabes cuál es la compatibilidad? Puedo ver que las rotaciones (la 'flecha') probablemente no funcionen en IE/opera, sino en cualquier otro límite? – Nanne
rotar el trabajo en la ópera y para IE puede utilizar el filtro IE http://www.boogdesign.com/b2evo/index.php/element-rotation-ie-matrix-filter?blog=2 – sandeep
También puede hacerlo mediante la conmutación entre display: block en vuelo estacionario y display: none sin vuelo estacionario para producir el efecto.
Usted puede hacer esto Herramienta CSS Consejo través de código simple: -
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
a.info{
position:relative; /*this is the key*/
color:#000;
top:100px;
left:50px;
text-decoration:none;
text-align:center;
}
a.info span{display: none}
a.info:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:-60px;
width:15em;
border:5px solid #0cf;
background-color:#cff; color:#000;
text-align: center;
padding:10px;
}
a.info:hover span:after{ /*the span will display just on :hover state*/
content:'';
position:absolute;
bottom:-11px;
width:10px;
height:10px;
border-bottom:5px solid #0cf;
border-right:5px solid #0cf;
background:#cff;
left:50%;
margin-left:-5px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
</style>
</head>
<body>
<a href="#" class="info">Shailender Arora <span>TOOLTIP</span></a>
</div>
</body>
</html>
Este es un pequeño pellizco en las otras respuestas. Si tiene divs anidados, puede incluir más contenido interesante como H1 en su ventana emergente.
CSS
div.appear {
width: 250px;
border: #000 2px solid;
background:#F8F8F8;
position: relative;
top: 5px;
left:15px;
display:none;
padding: 0 20px 20px 20px;
z-index: 1000000;
}
div.hover {
cursor:pointer;
width: 5px;
}
div.hover:hover div.appear {
display:block;
}
HTML
<div class="hover">
<img src="questionmark.png"/>
<div class="appear">
<h1>My popup</h1>Hitherto and whenceforth.
</div>
</div>
El problema con estas soluciones es que todo lo que después de esto en la página se desplaza cuando se muestra la ventana emergente, es decir, el resto de la página salta a la baja para 'hacer espacio'. La única forma en que podía solucionar esto era haciendo posición: absoluta y eliminando las etiquetas CSS superiores e izquierdas.
Exactamente lo que dijeron, que va a funcionar.
En el elemento padre afirmados un max-height.
Estoy tomando sandeep ejemplo y agregando la altura máxima y, si es necesario, puede agregar la propiedad de ancho máximo. El texto se quedará donde debe permanecer (Si es posible, en algunos casos, tendrá que cambiar algunos valores para que se quede allí)
span{
background: none repeat scroll 0 0 #F8F8F8;
border: 5px solid #DFDFDF;
color: #717171;
font-size: 13px;
height: 30px;
letter-spacing: 1px;
line-height: 30px;
margin: 0 auto;
position: relative;
text-align: center;
text-transform: uppercase;
top: -80px;
left:-30px;
display:none;
padding:0 20px;
}
span:after{
content:'';
position:absolute;
bottom:-10px;
width:10px;
height:10px;
border-bottom:5px solid #dfdfdf;
border-right:5px solid #dfdfdf;
background:#f8f8f8;
left:50%;
margin-left:-5px;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
p{
margin:100px;
float:left;
position:relative;
cursor:pointer;
max-height: 10px;
}
p:hover span{
display:block;
}
max-height en el p párrafo , en segundo lugar a la última, última línea.
Pruébelo antes de calificarlo inútil.
¿Cómo esto agrega algo sobre el respuestas existentes? – cimmanon
Propiedades de altura máxima y ancho máximo agregadas, nada se desplaza cuando el cursor está sobre el texto y se está mostrando el cuadro. –
Quizás esté interesado en recibir esta respuesta - http://stackoverflow.com/questions/1055581/how-do-i-add-a-tool-tip-to-a-span-element/25836471#25836471 –