Cómo crear tooltips o nubes al pasar el mouse
Hola,
Primero ¿qué son tooltips? con tooltips me refiero a la nube o el mensaje que aparece al pasar el mouse por encima de un enlace.
Primero, creamos los enlaces que queramos, yo crearé 3 enlaces y al lado de esos enlaces le agregaremos un div de clase tooltip (Esto es para que no todos los enlaces tengan tooltip sino solo los que nosotros queramos que tengan).
Bien, en el código CSS yo personalicé los tooltips de la siguiente forma, ustedes podrán cambiarlo a su gusto.
--- Explico ésto rápido, en donde dice .tooltip . arrow { al final dice -moz-transform:translate(0px, -3px); eso se lo coloqué sencillamente porque en Google Chrome, se ve bien pero al correrlo en Mozilla Firefox, la flechita que acompaña a la nube se ve muy abajo y por lo tanto se ve feo, entonces para arreglarlo y que solo ocurra eso en Mozilla Firefox, agregué ese efecto. Hay que recordar que siempre debemos tratar de que se mantenga el mismo diseño en todos los navegadores y que no solo sirva en uno y en otro no. ---
Ahora vamos con el jquery. Recuerden que deben tener importado la librería jquery en su head.
El código jquery lo que dice es: "Para cada enlace, se mantendrán los tooltip escondidos y al pasar el mouse sobre el enlace, mostrarás el tooltip y cada tooltip contendrá escrito el valor del data-tooltip de su enlace más un div de clase arrow (o sea, añadirá la flechita) y se mostrará abajo a la izquierda de cada enlace. Y al sacar el mouse encima del enlace, esconder el tooltip".
Bueno espero que les sirva :D cualquier cosa díganme por aquí para ayudarlos.
A los aventureros, les invito desarrollar más ese pequeño código, si quieren hacerlo más genérico o que lo hagan funcionar en botones, divs, imágenes, etc.
Primero ¿qué son tooltips? con tooltips me refiero a la nube o el mensaje que aparece al pasar el mouse por encima de un enlace.
<a href=" ">Enlace</a>Estuve haciendo varias pruebas y bueno es un pequeño código que hice yo. Por el momento solo lo hago funcionar en enlaces de etiqueta a href=".." Bueno, así lo hice y lo comparto con ustedes :)
Primero, creamos los enlaces que queramos, yo crearé 3 enlaces y al lado de esos enlaces le agregaremos un div de clase tooltip (Esto es para que no todos los enlaces tengan tooltip sino solo los que nosotros queramos que tengan).
<a href="#">Enlace 1</a> <div class="tooltip"></div> <a href="#">Enlace 1</a> <div class="tooltip"></div> <a href="#">Enlace 1</a> <div class="tooltip"></div>A las etiquetas de enlace, le agregaremos un atributo que creo que no existe pero cuando usemos jquery haremos que lo reconozca. A éste atributo yo le puse "data-tooltips", pero ustedes pueden colocarle como ustedes quieran, y como valor de ese atributo escribiremos lo que queremos que se muestre en la nubesita. Quedaría así.
<a href="#" data-tooltips="Ir a enlace 1">Enlace 1</a> <div class="tooltip"></div> <a href="#" data-tooltips="Ir a enlace 2">Enlace 1</a> <div class="tooltip"></div> <a href="#" data-tooltips="Ir a enlace 3">Enlace 1</a> <div class="tooltip"></div>
Bien, en el código CSS yo personalicé los tooltips de la siguiente forma, ustedes podrán cambiarlo a su gusto.
.tooltip {
min-width: 100px;
padding: 6px 10px 0px 10px;
border-radius: 3px;
background: rgba(0,0,0,0.8);
color: white;
font-size: 9pt;
display: table;
position: fixed;
margin-top: 6px;
z-index: 400;
}
.tooltip .arrow {
width: 0px;
height: 0px;
border-bottom: 8px solid rgba(0,0,0,0.8);
border-right: 8px solid transparent;
border-left: 8px solid transparent;
position: relative;
bottom:27px;
z-index: 300;
-moz-transform: translate(0px, -3px);
}--- Explico ésto rápido, en donde dice .tooltip . arrow { al final dice -moz-transform:translate(0px, -3px); eso se lo coloqué sencillamente porque en Google Chrome, se ve bien pero al correrlo en Mozilla Firefox, la flechita que acompaña a la nube se ve muy abajo y por lo tanto se ve feo, entonces para arreglarlo y que solo ocurra eso en Mozilla Firefox, agregué ese efecto. Hay que recordar que siempre debemos tratar de que se mantenga el mismo diseño en todos los navegadores y que no solo sirva en uno y en otro no. ---
Ahora vamos con el jquery. Recuerden que deben tener importado la librería jquery en su head.
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>Y en el mismo head escribiremos lo siguiente.<script>
$(document).on("ready",function()
{
$("a").each(function()
{
$(".tooltip").hide();
$("a").on("mouseover",function()
{
content = $(this).attr("data-tooltip");
$(".tooltip").each(function()
{
$(".tooltip").html(content+"<div class='arrow'></div>");
});
anchoElemento = $(this).offset();
$(this).next().fadeIn("fast").css(
{
left: anchoElemento.left
});
$(this).next().fadeIn("fast","linear");
}).mouseout(function()
{
$(".tooltip").fadeOut("fast","linear");
});
});
});
</script>El código jquery lo que dice es: "Para cada enlace, se mantendrán los tooltip escondidos y al pasar el mouse sobre el enlace, mostrarás el tooltip y cada tooltip contendrá escrito el valor del data-tooltip de su enlace más un div de clase arrow (o sea, añadirá la flechita) y se mostrará abajo a la izquierda de cada enlace. Y al sacar el mouse encima del enlace, esconder el tooltip".
Bueno espero que les sirva :D cualquier cosa díganme por aquí para ayudarlos.
A los aventureros, les invito desarrollar más ese pequeño código, si quieren hacerlo más genérico o que lo hagan funcionar en botones, divs, imágenes, etc.
Respuesta #1
excelente aporte! gracias por compartir en cuanto tenga un rato lo pruebo
0
Puntos
Puntos
Por alber hace 121 meses
Administrador
