1

我有一些代码在链接上有一个 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>
4

1 回答 1

1

尝试这个：

工作示例

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
                 }
             }]
         });
     });
 });
于 2013-08-04T22:20:41.233 回答