jQuery: показать подсказку без ссылки - PullRequest
Новая
       7

jQuery: показать подсказку без ссылки

4 голосов
/ 03 апреля 2010

Можно ли показать всплывающую подсказку без ссылки?

Например, у меня есть следующий код без ссылки: 

<ul class="letters" title="This is the title">
<li>A</li>
<li>B</li>
<li>C</li>
</ul>

Так, как я могу показать всплывающую подсказку " Это заголовок ", когда я наводю на него курсор мыши?

Кстати, я не хочу использовать плагин всплывающей подсказки.

Ответы [ 2 ]

5 голосов
/ 03 апреля 2010

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

Некоторые из составных частей:

  • Вы можете найти все элементы ul, которые имеют атрибут title, с помощью $ или jQuery: 

    var targets = $("ul[title]");

  • Вы можете наблюдать их за событием mouseenter и, если в течение X миллисекунд не сработает событие mouseleave, показать свою подсказку. (Это специфичные для IE события, но jQuery предоставляет их во всех браузерах, что очень полезно. Он также предоставляет hover, что является просто удобным средством соединения mouseenter и mouseleave обработчики.) Хотя это означает, что вы подключаете много обработчиков событий (поскольку mouseenter и mouseleave не создают пузырей - часть того, что делает их такими удобными). Возможно, вам лучше отследить mouseover / mouseout на уровне документа и справиться с возникающими сложностями, поскольку они do пузырь.

  • Чтобы показать всплывающую подсказку, вы можете получить местоположение рассматриваемого элемента (через offset) и показать абсолютно позиционированный div поблизости, содержащий заголовок (который вы можете получить через attr).

  • Когда пользователь перемещает мышь из всплывающей подсказки (mouseleave), удалите ее.

Но опять же, вы можете рассмотреть возможность использования кода из проекта, который уже сделал это, нашел все складки и т. Д. Сначала прочитайте код, чтобы убедиться, что он делает то, что вы хотите, а не то, что вы не хотите, но Изобретать колесо обычно (не всегда!) пустая трата времени ... Даже если вы на самом деле не используете плагин, прочитайте, чтобы увидеть, какие подводные камни могут быть полезны.

1 голос
/ 03 апреля 2010

Получить атрибут заголовка 

title = $('.letters').attr('title');

И работай оттуда. В Jquery нет волшебной функции title_tooltip_popup (), поэтому вы можете подумать о том, чтобы создать свою собственную или использовать плагин.

Помните, что если вы работаете с классами, этот селектор 

$('.letters')

может ссылаться на более чем 1 элемент

...