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类的下一个兄弟”。 Updated your jsfiddle code并且效果很好。

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

仅使用claseNames的多个工具提示（自制）问题

1 个答案: