Активировать всплывающую подсказку, которая использует общий div в качестве подсказки ... (jQuery)

Question

Я немного осмотрелся, но не могу найти ответ, который искал.

Что я хочу сделать: у меня есть div, в котором есть контент, включая другиеэлементы.Он должен оставаться скрытым на странице, но я хочу использовать его как всплывающую подсказку из трех разных элементов без дублирования элемента div.

Так, например, у меня есть div и3 изображения:

<div id='tooltip_div'>This is <b>a tooltip</b> to be used for the three images</div>
<img src='1.jpg' />
<img src='2.jpg' />
<img src='3.jpg' />

Я хочу прикрепить всплывающую подсказку к каждому из этих изображений с содержанием #tooltip_div div.Я посмотрел на this , но похоже, что подсказка ожидается сразу после целевого элемента.Это потребовало бы дублирования элемента div с всплывающей подсказкой для всех целевых элементов, с которыми я хочу связать его (поэтому мне нужно было бы иметь этот элемент div три раза, один раз после каждого изображения).

Было бы здорово, если бы я мог что-то сделать $('img').tooltip('#tooltip_div'), в сущности сказать плагину, какой элемент использовать для всплывающей подсказки.

Если кто-то может помочь, это было бы здорово!Спасибо!

Answer 1

Попробуйте Типси .Это отличный плагин и его легко активировать

$(".tip").tipsy();

Answer 2

Есть еще один плагин всплывающей подсказки, который я использовал, который поддерживает это.

jQuery Tools Tooltip

Обратите внимание на параметр tip, в котором можно указатьодин элемент всплывающей подсказки.

Answer 3

Tipsy еще лучше: http://onehackoranother.com/projects/jquery/tipsy/. Активируйте HTML, установите статическое сообщение (ваш div), и все готово.

Дайте вашим изображениям класс, скажем class="images".

Тогда вы просто набираете: $(".images").tipsy({html: true, fallback: "*your div, your content, whatever*});

Answer 4

Попробуйте Совет . Вы добавляете атрибут title к вещам, для которых вы хотите иметь всплывающую подсказку, а затем добавляете класс «tip», то есть вы можете сделать следующее:

$(".tip").tipTip();

Вы также можете настроить содержимое полученной всплывающей подсказки так, чтобы оно было любым, используя метод content(). Возможно извлеките ваш контент из скрытого раздела, используя .content($("#tooltip_div").html());