Question

this is my implementation of a Jquery tooltip:

<script type="text/javascript">

$(document).ready(function(){
        var tiempo_espera = 100;
        /* Detectar que el raton pasa por encima */
        $('.disparador').hover(function(e) {
          /*Guardamos el selector del disparador y de tooltip en una variable*/
            var disp = $(this);
             var tip= $(this).next('.miTooltip');
            if(typeof t != 'undefined'){
                /*reiniciamos tiempo_espera*/
                clearTimeout(t);
            }
            $('.miTooltip').css({
                /*colocamos el tooltip según el ratón y el tamaño del tooltip*/
                left: e.pageX-($(tip).width()/2)+'px',
                top: e.pageY-$(tip).height()*3/2+'px'
            }).show();

        });
        /* En caso de que se mueva el raton */
        $('.disparador').bind('mousemove', function(e){
            var disp = $(this);
            var tip= $(this).next('.miTooltip');
            //alert(tip.lenght);
           $('.miTooltip').css({
               /*Pues recolocamos el tooltip*/
                left: e.pageX-($(tip).width()/2)+'px',
                top: e.pageY-$(tip).height()*3/2+'px'
            });
        });

        $('.disparador').mouseout(function() {
            /*añadimos tiempo_espera por si el usuario se sale sin querer*/
            t = setTimeout("$('.miTooltip').fadeOut(200)",tiempo_espera);
        });
});


</script>

You can test it here:
http://jsfiddle.net/cz7dA/

the problem is when i try to use more than one tooltip in the same page: basically i see them all when hover only one: is this because i don’t select by id? I though that the use of $(this) I was selecting only one instance..
you can see the problem i’m talking about here: http://jsfiddle.net/K2w5J/2/

Answer 1

In a nutshell, you’re instructing all .miTooltip divs to show in the following line:

$('.miTooltip').css({
  /*colocamos el tooltip según el ratón y el tamaño del tooltip*/
  left: e.pageX-($(tip).width()/2)+'px',
  top: e.pageY-$(tip).height()*3/2+'px'
}).show();

Update the selector slightly, and all should work fine. In this case, we’re instructing only the “next sibling with a class of .miTooltip” to be shown. Updated your jsfiddle code and it works great.

$(this).next('.miTooltip').css({
  /*colocamos el tooltip según el ratón y el tamaño del tooltip*/
  left: e.pageX-($(tip).width()/2)+'px',
  top: e.pageY-$(tip).height()*3/2+'px'
}).show();