Проблема с несколькими всплывающими подсказками (самодельными) при использовании только claseNames

Question

это моя реализация всплывающей подсказки Jquery:

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

Вы можете проверить это здесь: http://jsfiddle.net/cz7dA/

проблема в том, что когда я пытаюсь использовать более одной всплывающей подсказки на одной и той же странице: в основном, я вижу их все, когда наведите курсор только на один: это потому, что я не выбираю по id? Я думал, что использование $ (это) я выбрал только один экземпляр .. Вы можете увидеть проблему, о которой я говорю, здесь: http://jsfiddle.net/K2w5J/2/

Answer 1

Короче говоря, вы указываете, что все div .miTooltip должны отображаться в следующей строке:

$('.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();

Немного обновите селектор, и все должно работать нормально.В этом случае мы показываем только «следующего брата с классом .miTooltip». Обновил код jsfiddle , и он отлично работает.

$(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();