Question

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

问题：这样做时我会遇到一些意想不到的行为。例如，您单击的第一个div（无论哪一个），它按预期工作：工具提示会弹出并保持不变，除非您单击其中或其中一个div。但是，当再次为另一个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>

麻烦jQuery工具提示

0 个答案: