Возникли проблемы с подсказками jQuery - PullRequest
Новая
       60

Возникли проблемы с подсказками jQuery

0 голосов
/ 21 июля 2011

Я использую плагин jQuery Tools Tooltip найден здесь .Это предполагаемое поведение: иметь 3 элемента, в данном случае div s, при нажатии на которые появляется всплывающая подсказка.Эта всплывающая подсказка является еще одним элементом на странице, который скрыт с помощью CSS.Когда он появляется, мне нужно, чтобы он оставался видимым до тех пор, пока пользователь не нажмет одну из div в подсказке (или внутри самой подсказки, если это невозможно) или пока они не нажмут одну из других начальных 3 div с.

Проблема: я получаю неожиданное поведение при этом.Например, при первом щелчке 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>
...