jqueryui工具提示问题 - 工具提示单独重新出现然后停止工作

时间:2013-08-04 12:13:38

标签: jquery jquery-ui tooltip

我有一些代码在链接上有一个jquery工具提示。单击该链接时,将打开一个对话框。关闭对话框时,工具提示会自动重新出现,然后停止工作。这发生在Waterfox 18和IE8中。我没有配备最新FF的计算机进行测试,但它似乎在Chrome中运行正常。

我在http://jsfiddle.net/tLcZ2/

提出了一个例子

有什么想法吗?这是一个jquery / jqueryui错误吗?代码是:

<html>
    <head>
        <title>Test Tooltip</title>
        <link type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>            
    </head>
    <body>
    <ol>
        <li>Mouse over the test link - the "test tooltip" jquery tooltip should appear</li>
        <li>Click the link - the dialog should pop up</li>
        <li>Move the mouse away - the tooltip should disappear</li>
        <li>Close the dialog - the dialog should close <strong>but the tooltip also re-appears</strong></li>
        <li>Click anywhere on the page - the tooltip disappears</li>
        <li>Mouseover the test link - <strong>the tooltip no longer appears</strong></li>
    </ol>

        <a title="" class="tttest" href="javascript:void(0)">Test Link</a>
        <script language='javascript'>
        $(document).ready(function() {
            $(".tttest").tooltip({ content: "Test Tooltip" });
            $('.tttest').on('click', function() {
                $('<div></div>').html('test').dialog({
                        'title':'Test',
                        'buttons': {
                            'Close' : function() { $(this).dialog('close'); }
                        }
                    });
                return false;
            });
        });
        </script>
    </body>
</html>

1 个答案:

答案 0 :(得分:1)

试试这个:

Working Example

HTML

<a class="tttest" href="javascript:void(0)" title="Must Have Title">Test Link</a> 

请注意,您必须拥有标题

JS

 $(document).ready(function () {
     $(".tttest").tooltip({content:'Test Tooltip'});
     $('.tttest').on('click', function () {
         $('<div></div>').text('test').dialog({ // use .text rather than .html
             'title': 'Test',
             buttons: [{
                 text: "Close",
                 click: function () {
                     $(this).dialog("close");
                     $(".tttest").blur();  //remove focus from .tttest to close tooltip
                 }
             }]
         });
     });
 });