Подсказка jQuery для ячейки таблицы - PullRequest
Новая
       4

Подсказка jQuery для ячейки таблицы

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

Я пытаюсь создать простую подсказку для ячеек таблицы, используя jQuery.
Я написал этот код: 

<script type="text/javascript">
        $(function () {

            $(".test").bind("mouseenter", function (e) {
                $("#ToolTipDIv").offset({ left: e.pageX, top: e.pageY });
                $("#ToolTipDIv").show("slow");
            });
            $(".test").bind("mouseleave", function (e) {
                $("#ToolTipDIv").hide("slow");
            });
        }); 

    </script>
<div id="ToolTipDIv" style="background-color: Yellow; display: none; width: 20%;">
        This is a text
    </div>
    <table class="style1" border="1">
        <tr>
            <td class="test">
                1
            </td>
            <td class="test">
                6
            </td>
        </tr>
        <tr>
            <td class="test">
                2
            </td>
            <td class="test">
                7
            </td>
        </tr>
        </table>

Но это не работает, как ожидалось. когда я наведу курсор мыши на ячейки, подсказка Div закрылась и открылась несколько раз.
например, я хочу просмотреть всплывающую подсказку для третьей ячейки. Я наведу указатель мыши на первую и вторую ячейку, чтобы добраться до третьей ячейки. Подсказка всплывающей подсказки будет отображаться и скрываться 3 раза.
jsfiddle link

Ответы [ 3 ]

6 голосов
/ 05 июля 2011

Это потому, что когда ваш новый div выскакивает и ваша мышь «в» этом новом div, вы больше не зависаете на старом месте.Сначала я предлагаю использовать указатель jquery, а не указывать указатель мыши и т. Д., А затем посмотреть на плагин hoverintent.но для решения вашей проблемы вам нужно установить абсолютную позицию всплывающего div.

1 голос
/ 05 июля 2011

Мой совет - всплывающие подсказки могут появляться быстро, но быстро исчезать (меньше беспокоит пользователя).Таким образом, ваш код будет: 

$(function () {
    $(".test").bind("mouseenter", function (e) {
        $("#ToolTipDIv").offset({ left: e.pageX, top: e.pageY });
        $("#ToolTipDIv").show('normal');
    });
    $(".test").bind("mouseleave", function (e) {
        $("#ToolTipDIv").hide(); //Note I removed 'slow'
    });
});

И, добавьте стиль position: absolute; к элементу всплывающей подсказки.

Я обновил вашу скрипку: http://jsfiddle.net/DmnMQ/3/, и он работаетОК.

Надеюсь, это поможет.Приветствия

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

Почему вы не используете плагин tiptip jquery, который можно найти по ссылке ниже, поскольку он намного проще.

http://code.drewwilson.com/entry/tiptip-jquery-plugin

Вы можете обернуть свой код в промежуток примерно так, и плагин позаботится обо всем остальном. Нет смысла изобретать велосипед. 

<td><span class="tiptipClass" title="your tooltip text here">1</span></td>
...