Hacer un tooltip con jQuery y CSS3

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando…

También te podría gustar...

Sobre este artículo

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando…

Licencia: Contenido exclusivo de LaWebera.es. Prohibida su copia

URL: LaWebera.es :: Diseño de paginas web

Lleva trabajando como desarrollador web desde hace más de 10 años. Es un apasionado del código, habiendo tocado todos los palos, especialmente PHP, MySQL, JavaScript, incluyendo frameworks y librerías como jQuery, Symfony, CakePHP...

11 Respuestas

  1. Adrián

    Uuups! No existe descarga para el archivo. al parecer ya se movió a otra carpeta.
    tooltip_jquery_css3.rar

    • Verónica Milán

      Hola Adrián,
      Gracias por avisar, habíamos perdido la carpeta de descargas pero ya está solucionado. Si intentas descargarte el ejemplo del tooltip de nuevo debería irte bien.

      Saludos.

  2. Jose Carreño

    Para quitar el title por defecto y solo dejar el tooltip basta con cambiar la etiqueta title por cualquier otra que podamos extraer su valor por ejemplo value…
    …..

    ..
    Tooltip en un enlace
    Texto del tooltip

    jQuery(“a”).mouseenter(function (e) {
    var posMouse = e.pageX – this.offsetLeft;
    var textoTooltip = jQuery(this).attr(“value”);
    …..
    ….
    ..

  3. Lucas

    Hola! El tooltip está genial, es algo parecido a lo que vengo buscando desde hace mucho tiempo… En realidad lo que yo quería era un tooltip igual a ese pero que siguiera al mouse de un lado hacia el otro por una imagen… Ah, otra cosa, no se porque se me dificulta entender tu explicación… es como que das muchas vueltas, me parece que podrías hacer lo mismo, pero hacerlo más simple, para que usuarios inexpertos como yo, podamos entender mejor el funcionamiento del tooltip. Saludos! :)

  4. Jose Alvarado

    En vez de title, ustedes pueden inventar uno. Yo por ejemplo le puse al mio data-tooltip.
    Y en el javascript, en vez de ésta línea

    var textoTooltip = jQuery(this).attr(“title”);

    Cambian el title por lo que inventaron, en mi caso quedaría así:
    var textoTooltip = jQuery(this).attr(“data-tooltip”);
    Y así me evito que aparezca la nubesita de title predeterminada.

  5. Eborio Linárez

    Gracias es justamente lo que estaba buscando

  6. Julio

    Buenas noches, como que en la data del elemento? como se agrega esa data?
    Muchas gracias. sencillo e interesant.

  7. DSTROYR

    Como pongo el tooltip en una imagen (img) ?

  8. rafuk97

    no entiendo para que sirve el “Texto del tooltip” que se pone en el

  9. Juan

    Como elimino el title original ; por que cuando paso por el enlace me muestra ambos: el predefinido y el que hiciste

    • Daniel Ernesto Navarro Herrera

      Si no quieres que aparezca el title por default, puedes guardar el valor del atributo en la data del elemento y al momento de abrir el tooltip llamarlo de esta manera jQuery(this).data(‘title’); o si prefieres simplemente puedes usar otro atributo en vez de “title”, quizás un atributo personalizado que sólo represente valor para ti.

Deja un comentario

El email no se publica. Todos los campos obligatorios, salvo Web.

Usamos cookies propias y de terceros para mejorar nuestros servicios, realizar el análisis de la navegación de los usuarios y mostrar publicidad según tus preferencias y hábitos de navegación. Si continúas navegando, las aceptas. Puede cambiar la configuración u obtener más información aquí

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar