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

108
14

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

Что я хочу сделать: у меня есть 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' />

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

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

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

спросил(а) 2011-07-20T22:33:00+04:00 9 лет, 3 месяца назад
1
Решение
114

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

Инструмент JQuery Tools Tooltip

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

ответил(а) 2011-07-20T22:37:00+04:00 9 лет, 3 месяца назад
70

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

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

ответил(а) 2011-07-20T22:36:00+04:00 9 лет, 3 месяца назад
41

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

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

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

ответил(а) 2011-07-20T22:37:00+04:00 9 лет, 3 месяца назад
41

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

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

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

ответил(а) 2011-07-20T22:35:00+04:00 9 лет, 3 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема