jquery ui 工具提示修改为单击时仅打开和关闭一次答案

【问题标题】：jquery ui tooltips modified to work on click only opens and closes one timejquery ui 工具提示修改为单击时仅打开和关闭一次
【发布时间】：2023-03-26 01:05:01
【问题描述】：

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/

【问题讨论】：

标签： jquery jquery-ui tooltip jquery-ui-tooltip

【解决方案1】：

关闭tooltip后尝试设置“.tooltip-tick”的title-attribute：

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

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

这只是一个小变通办法;)

【讨论】：

太好了，谢谢。可惜他们还没有修复它（至少在 1.11.2 中）

【解决方案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();

           });
        }
    });

【讨论】：