Jquery多个工具提示

时间:2016-06-28 23:36:18

标签: jquery html

尝试获取最近2个小时的多个工具提示,但仍无法完成项目的最后一部分,所以我决定寻求帮助。

工作示例可以在http://titan.maxko.org/?page=search&item=tier上找到当你将GROUP图标悬停在显示图像上而不是再次悬停在任何图像上时它会起作用但问题是它是否已经转换了html标签,因为它已经完成了首先悬停。简而言之,工具提示中的工具提示会转换为html标签。

我的代码:

<script>
        $(function () {
          $.widget("ui.tooltip", $.ui.tooltip, {
              options: {
                  content: function () {
                      return $(this).prop('title');
                  }
              }
          });

          $( "[title]" )
            .bind( "mouseleave", function( event ) {

                var test = $(this).attr('class');
                if(test != "group")
                    return;

                event.stopImmediatePropagation();

                var fixed = setTimeout('$("[title]").tooltip("close")', 50);

                $(".ui-tooltip").hover(
                    function(){clearTimeout (fixed);},
                    function(){$("[title]").tooltip("close");}
                );
            }).tooltip();

      });
</script>

提前致谢。

1 个答案:

答案 0 :(得分:0)

看来你的挑战有不同的方面。 我只是争辩说,您可以查看https://api.jqueryui.com/1.9/tooltip/

上的文档

首先,您不需要在场景中使用stopPropagation和tooltip.close()。

尝试以下方法: 使用提供的事件,例如tooltipclose和类似的事件。 通过其配置对象初始化插件初始化处理程序。

您通常不需要使用超时,请使用

$( ".selector" ).tooltip({
  hide: { effect: "explode", duration: 1000 }
});

$( ".selector" ).tooltip({
  show: { effect: "blind", duration: 800 }
});

让插件处理fadeOut或类似的内容。

您可以将元素的[title]的默认链接更改为您需要的任何选择器。例如。对于新创建的元素。

$( ".selector" ).tooltip({
  items: "img[alt]"
});

要将处理程序绑定到动态创建的dom元素,请使用

jQuery.on()

方法。请参阅http://api.jquery.com/on/,因为bind()不适用于此。

通常,您需要在与用户交互时将处理程序绑定到某个类或类型的每个新旧元素。

使用

$(this)

引用处理程序中的当前元素。