0

我正在使用此处找到的 jQuery 工具工具提示插件。这是它的预期行为：有 3 个元素，在本例中为divs，单击时会弹出一个工具提示。此工具提示是页面上通过 CSS 隐藏的另一个 div。当它弹出时，我需要它保持可见，直到用户单击div工具提示中的一个（或者如果不可能，则在工具提示本身内部）或单击其他初始 3 中div的一个。

问题：执行此操作时出现一些意外行为。例如，您第一次div单击（无论哪个），它都会按预期工作：工具提示会弹出并保持不变，除非您在其中单击或单击其他divs 中的一个。但是，当再次执行此操作时div，一旦鼠标离开该div区域，它就会消失。你仍然可以点击你点击的第一个没有问题的...

我不确定这里有什么问题。=/

下面的测试代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en' dir='ltr'>
<head>
    <title>Tool Tip Demo</title>
    <link rel='stylesheet' type='text/css' href='style/style.css' />
    <script type='text/javascript' src='jquery.js'></script>
    <script type='text/javascript' src='jquery.tools.min.js'></script>

    <style>
    .box2 {
        display: inline-block;
        margin: 5px;
        padding: 3px;
        width: 64px;
        height: 64px;
        line-height: 64px;
        background-color: green;
        text-align: center;
    }
    #tooltip { 
        display: none;
        width: 300px;
        height: 150px;
        overflow: auto;
        background-color: pink;
    }
    </style>
</head>

<body>
    <h1>Tool Tip Demo</h1>
    <script language='javascript' type='text/javascript'>
    $(document).ready(function () {
        $('.tooltip').tooltip({ 
            events: { 
                def: "click, mouseout",
                tooltip: "mouseenter, click"            
            },
            tip: '#tooltip'}).dynamic({ bottom: { direction: 'down'} });
    });
    </script>

    <div style='padding: 1em; width: 450px; margin: 0 auto;'>
            <div  class='tooltip box2'>
                Div
            </div>
            <div  class='tooltip box2'>
                Div
            </div>
            <div class='tooltip box2'>
                Div
            </div>
    </div>

    <div id='tooltip'>
            <div class='box2'>
                Div
            </div>
            <div class='box2'>
                Div
            </div>
            <div class='box2'>
                Div
            </div>
            <div class='box2'>
                Div
            </div>
            <div class='box2'>
                Div
            </div>
            <div class='box2'>
                Div
            </div>
            <div class='box2'>
                Div
            </div>
            <div class='box2'>
                Div
            </div>
            <div class='box2'>
                Div
            </div>
    </div>
</body>
</html>
4

0 回答 0