微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

jquery:1.8.2
jquery ui: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>

在工具提示实现中,我使用“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/

解决方法

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

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

打开工具提示需要标题,但不知何故,它将在关闭删除.

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐