Как привязать всплывающие подсказки Twitter Bootstrap к динамически создаваемым элементам?

213

Я использую всплывающие подсказки Twitter-бутстрапа с помощью javascript, например:

$('a[rel=tooltip]').tooltip();

Моя разметка выглядит следующим образом:

<a rel="tooltip" title="Not implemented" class="btn"><i class="icon-file"></i></a>

Это отлично работает, но я добавляю элементы <a> динамически и всплывающие подсказки не отображаются для этих динамических элементов. Я знаю это, потому что я только связываю .tooltip() один раз, когда документ завершен, загружается с типичной функциональностью jquery $(document).ready(function().

Как связать это с динамически создаваемыми элементами? Обычно я делаю это с помощью метода jquery live(). Однако, какое событие я использую для привязки? Я просто не знаю, как подключить bootstrap.tooltip() с помощью jquery.live().

Я нашел один способ сделать эту работу примерно следующим:

/* Add new 'rows' when plus sign is clicked */
$("a.add").live('click', function () {
    var clicked_li = $(this).parent('li');
    var clone = clicked_li.clone();

    clone.find(':input').each(function() {
        $(this).val('');
    });

    clicked_li.after(clone);
    $('a[rel=tooltip]').tooltip();
});

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

Я не вижу никаких проблем с этим подходом. Я просто ищу лучшую практику или понимание поведения.

  • 0
    хм хороший вопрос, это поможет? github.com/twitter/bootstrap/issues/2374
  • 0
    Это интересное чтение, но мне нужна только подсказка одного типа. Я просто хочу убедиться, что добавляются любые динамически добавленные элементы, которые соответствуют селектору всплывающей подсказки, а это не так.
Показать ещё 4 комментария
Теги:

6 ответов

445
Лучший ответ

Попробуйте следующее:

$('body').tooltip({
    selector: '[rel=tooltip]'
});
Поделиться
  • 3
    Отлично. Это правильный ответ, потому что это в основном замена live / on.
  • 0
    Любопытно, как это работает точно?
Показать ещё 15 комментариев
106

Если у вас есть несколько подсказок, которые вы хотите инициализировать, это хорошо работает для меня.

$("body").tooltip({
    selector: '[data-toggle="tooltip"]'
});

Затем вы можете установить свойство для отдельных элементов с помощью атрибутов data.

Поделиться
  • 3
    Отличный совет. Мне пришлось изменить его на $ ("body"). Tooltip ({selector: '[data-toggle = "tooltip"]'});
  • 2
    Так должно быть с Bootstrap 3. Отлично!
Показать ещё 3 комментария
15

Для меня только захват события mouseenter был немного ошибкой, и всплывающая подсказка не отображалась/скрывалась должным образом. Мне пришлось написать это, и теперь он отлично работает:

$(document).on('mouseenter','[rel=tooltip]', function(){
    $(this).tooltip('show');
});

$(document).on('mouseleave','[rel=tooltip]', function(){
    $(this).tooltip('hide');
});
Поделиться
  • 3
    Это было очень полезно, чтобы понять, почему .on ('hover') не будет работать правильно.
  • 0
    Это было все, что мне нужно было использовать для моей реализации использования handlebars.js. Если я не использовал handlebars.js, принятый ответ также работал.
Показать ещё 1 комментарий
10

Я отправил более длинный ответ здесь: https://stackoverflow.com/questions/9446318/bootstrap-tooltips-not-working

TL; DR: вам нужна только одна строка кода, которая запускается в событии готовности документа:

$(document.body).tooltip({ selector: "[title]" });

Другой более сложный код, предложенный в других ответах, не кажется необходимым (я тестировал это с помощью Bootstrap 3.0).

Поделиться
  • 1
    Это лучший ответ.
  • 0
    Это сработало для моего случая. Я использовал таблицу с Tablesorter 2.26.2 и заполнял значения через вызов Ajax. Проблема заключалась в том, что всплывающая подсказка html отображалась как текст HTML, а не как выводимый результат. Это единственное решение, сработавшее для меня с первого взгляда. +1 и большое спасибо!
5

Для меня этот js воспроизводит ту же проблему, что и при использовании Paola

Мое решение:

$(document.body).tooltip({selector: '[title]'})
.on('click mouseenter mouseleave','[title]', function(ev) {
    $(this).tooltip('mouseenter' === ev.type? 'show': 'hide');
});
Поделиться
1

Я обнаружил, что сочетание этих ответов дало мне лучший результат - позволил мне по-прежнему позиционировать всплывающую подсказку и прикрепить ее к соответствующему контейнеру:

$('body').on('mouseenter', '[rel=tooltip]', function(){
  var el = $(this);
  if (el.data('tooltip') === undefined) {
    el.tooltip({
      placement: el.data("placement") || "top",
      container: el.data("container") || false
    });
  }
  el.tooltip('show');
});

$('body').on('mouseleave', '[rel=tooltip]', function(){
  $(this).tooltip('hide');
});

Соответствующий HTML:

<button rel="tooltip" class="btn" data-placement="bottom" data-container=".some-parent" title="Show Tooltip">
    <i class="icon-some-icon"></i>
</button>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню