4

jQuery：1.8.2
jQuery 用户界面：1.9.1

我修改了实现 jquery ui 工具提示的默认方式，因此它可以在单击而不是悬停时工作。

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

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

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

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

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

4

2 回答 2

8

关闭工具提示后尝试设置“.tooltip-tick”的标题属性：

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

打开工具提示需要标题，但关闭后会以某种方式将其删除。

这只是一个小变通办法；）

于 2012-12-13T14:00:22.043 回答
0

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

    $(".help").tooltip({ 

         position: { 

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

         },  

         open: function( event, ui ) {

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

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

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

           });
        }
    });
于 2013-03-27T20:05:38.557 回答