Question

jquery：1.8.2
jquery ui：1.9.1

我修改了实现jquery ui工具提示的默认方式，因此它可以在click而不是hover上工作。

“a”标记是您单击以激活工具提示的内容，但未定义为工具提示。工具提示＆amp;工具提示内容放在'a'标记之后并用css隐藏，因此您无法悬停或查看内容。

<a class="tooltip-click" id="tt3">asdf</a><span class="tooltip-tick" title="">&nbsp;</span>
<div class="tooltip-content">3</div>

在工具提示实现中，我使用“content：”属性来获取工具提示定义旁边的div的内容，而不是使用“title”

我还在工具提示定义中有一个函数，如果单击工具提示内容，它将关闭工具提示。

$('.tooltip-tick').tooltip({
        position: { 
            my: "left+15 center", 
            at: "right center",
            using: function( position, feedback ) {
                        $( this ).css( position );
                        //function to close tooltip when content is touched                            
                        $('.ui-tooltip-content').click(function(){
                            $(".tooltip-tick").tooltip("close");
                        });   
        }},
        //the content of the div next to the tooltip instead of using title
        content: function(){
            return $(this).next().html();
        }   
    });

单击A标签时，首先关闭所有打开的工具提示，然后打开必要的标签：

$('.tooltip-click').click(function () {
        //first i close open tooltips
        if($(".ui-tooltip").length) $(".tooltip-tick").tooltip("close");
        //then open the tooltip next to the a tag                
        $($(this).next('.tooltip-tick')).tooltip('open');
    });

一切正常，但只有一次。 http://jsfiddle.net/Js8g6/

Answer 1

关闭工具提示后，尝试设置“.tooltip-tick”的title-attribute：

$(".tooltip-tick").attr("title", "");

打开工具提示需要标题，但不知何故，它会在关闭后删除。

这只是一个小小的解决办法;）

Answer 2

这是我找到的最佳解决方案。具有禁止标题的默认悬停的额外好处。

    $(".help").tooltip({ 

         position: { 

             my: "left-1 top+20", at: "right top" 

         },  

         open: function( event, ui ) {

            $('.ui-tooltip').hide();

            $('.help').click(function() {

                   $('.ui-tooltip').fadeIn();

           });
        }
    });

jquery ui工具提示修改为仅在点击时工作打开和关闭一次

2 个答案: