仅使用 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 选择吗？我虽然使用 $(this) 我只选择了一个实例.. 你可以看到我在这里讨论的问题： http://jsfiddle.net/K2w5J/2/

Answer 1

简而言之，您指示所有 .miTooltip div 在以下行中显示：

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