Использование всплывающей подсказки jquery несколько раз на одной странице

Question

Использование всплывающей подсказки jquery несколько раз на одной странице

0

Я использую подсказку jquery для элемента ретранслятора asp.net.

<div class="tooltip" style="display: none">
<div style="text-align: center; font-weight: bold;">
<%# Eval("Name") %><br />
</div>
</div>


$(function () {
    var du = 1000;
    var tooltip;
    $(document).tooltip({
        show:{effect:'slideDown'},
            items: "h5",
            content: function () {
                tooltip = $(this).siblings('.tooltip');
                return tooltip.html();
        }
    });
    });

Теперь я должен реализовать функциональность справки. Должен быть значок справки, и при нажатии на значок всплывающее окно должно открываться с инструкциями, я хотел бы снова использовать подсказку jquery. Я не знаю, как реализовать его на этот раз, следует ли включить его в ту же функцию $ function(), или мне нужно использовать другую функцию?

Если у кого-нибудь есть идеи, пожалуйста, дайте мне знать..

CodeNinja 24 сен. 2013, в 18:15

Источник

Теги:

c#

javascript

jquery

asp.net

jquery-ui

1 ответ

Ещё вопросы

Justin Morgan · Accepted Answer · 2013-09-24T14-15-00.000Z

Как вы его написали, вам больше не нужно делать JavaScript. Будет активирован любой элемент <h5> который имеет <h5> элемент с классом tooltip. Все, что вам нужно сделать, это .tooltip div .tooltip рядом с вещью, которая должна ее активировать. Пример:

<ul>
 <li>
   <h5>Here is thing 1.</h5>
   <div class="tooltip" style="display: none">This is tooltip 1.</div>
 </li>
 <li>
   <h5>Here is thing 2.</h5>
   <div class="tooltip" style="display: none">This is tooltip 2.</div>
 </li>
</ul>

Если вы хотите, всплывающие подсказки, чтобы работать для других элементов, чем h5, изменить items вариант:

items: "h5, img.help-icon",

Убедитесь, что каждая пара триггеров/подсказок - это братья и сестры, и убедитесь, что у вас есть какая-то оболочка вокруг каждой пары, чтобы показать, какая подсказка идет с каким элементом. Например, это НЕ будет работать должным образом:

<li>
  <div>
    <h5>Here is thing 1.</h5>
  </div>
  <div class="tooltip" style="display: none">This won't show up at all!</div>
</li>

Также это не будет:

<li>
  <h5>Here is thing 1.</h5>
  <div class="tooltip" style="display: none">This will be the text for both tooltips!</div>

  <h5>Here is thing 2.</h5>
  <div class="tooltip" style="display: none">This won't show up at all!</div>
</li>