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

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

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

Моя разметка выглядит так:

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

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

Как я могу связать это с динамически созданными элементами? Обычно я делаю это с помощью метода jquery live (). Однако какое событие я использую для привязки? Я просто не уверен, как подключить загрузчик .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). Итак, элементы, которые существуют, когда страница сначала загружается и соответствует этому селектору, заканчиваются всплывающей подсказкой дважды?

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

Попробуй это:

$('body').tooltip({
    selector: '[rel=tooltip]'
});

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

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

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

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

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

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

Я разместил более длинный ответ здесь: https://stackoverflow.com/a/20877657/207661

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

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

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

Для меня это JS воспроизводит ту же проблему, которая происходит с Паолой

Мое решение:

$(document.body).tooltip({selector: '[title]'})
.on('click mouseenter mouseleave','[title]', function(ev) {
    $(this).tooltip('mouseenter' === ev.type? 'show': 'hide');
});

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

$btn.tooltip({
  title: function(){
    return $(this).attr('title');
  }
});

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

$('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>