Hacer un tooltip con jQuery y CSS3

Sobre este artículo

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...

También te podría gustar...

9 Respuestas

  1. 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.

  2. rafuk97

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

  3. DSTROYR

    Como pongo el tooltip en una imagen (img) ?

  4. Julio

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

  5. Eborio Linárez

    Gracias es justamente lo que estaba buscando

  6. 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.

  7. 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! :)

  8. 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 ejemeplo 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”);
    …..
    ….
    ..

Deja un comentario

El email no se publica. Todos los campos obligatorios.