Having Trouble with jQuery tooltips

问题

I'm using the jQuery Tools Tooltip plugin found here. This is it's intended behavior: Have 3 elements, in this case divs, which, when clicked, popup a tooltip. This tooltip is another div on the page that is hidden via CSS. When it pops out, I need it to stay visible until either the user clicks on one of the divs in the tooltip (or inside the tooltip itself if that is not possible) or they click on one of the other initial 3 divs.

The problem: I get some unexpected behavior when doing this. For example, the first div you click (no matter which one), it works as expected: the tooltip pops up and stays up unless you click inside of it or one of the other divs. However, when doing it again for another div, it disappears once the mouse leaves the div area. You can still click on the first one you clicked on with no problems tho...

I'm not sure what's wrong here. =/

Test code below

<!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>

来源：https://stackoverflow.com/questions/6769317/having-trouble-with-jquery-tooltips

标签

jquery

tooltip

jquery-tooltip