Jak powiązać etykiety narzędzi Twitter Bootstrap z dynamicznie tworzonymi elementami?


277

Używam podpowiedzi bootstrap Twittera z javascript, takich jak:

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

Mój znacznik wygląda następująco:

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

Działa to dobrze, ale dodaję <a>elementy dynamicznie, a podpowiedzi nie są wyświetlane dla tych dynamicznych elementów. Wiem, że to dlatego, że wiążę .tooltip () tylko raz, gdy dokument jest załadowany z typową $(document).ready(function()funkcją jquery .

Jak mogę to powiązać z dynamicznie tworzonymi elementami? Zwykle robiłbym to za pomocą metody live () jquery. Jakiego zdarzenia używam do wiązania? Po prostu nie jestem pewien, jak podłączyć bootstrap .tooltip () za pomocą jquery .live ().

Znalazłem jeden ze sposobów, aby ta praca działała mniej więcej tak:

/* 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();
});

To działa, ale wydaje się trochę hackish. Dzwonię również dokładnie taką samą linię .tooltip () w wywołaniu $ (ready). Czy więc elementy, które istnieją, gdy strona ładuje się po raz pierwszy i pasują do tego selektora, kończą się dwukrotnie etykietką?

Nie widzę żadnych problemów z tym podejściem. Po prostu szukam najlepszej praktyki lub zrozumienia tego zachowania.


hmm dobre pytanie, czy to pomoże? github.com/twitter/bootstrap/issues/2374
Tim

To ciekawa lektura, ale chcę tylko jednego rodzaju podpowiedzi. Chcę tylko upewnić się, że zostaną dodane wszystkie dynamicznie dodane elementy pasujące do selektora podpowiedzi, co nie jest prawdą.
durden2.0 1.04

3
Świetne pytanie. Wydaje się, że jest to oversite ze strony Twittera.
Luke The Obscure

1
@ durden2.0 Jak chrześcijanie odpowiedzieli na twoje pytanie? Chcesz zaakceptować jako poprawny?
Rusłany Uralow,

3
Nie bardzo związane z twoim pytaniem, ale ... Uważam, że przejęcie relatrybutu jest złym stylem . To nie jest semantyczne i powstało ponad dziesięć lat temu jako hack. Obecnie każda przeglądarka sprzed kilku lat obsługuje data-*atrybuty i nie ma już powodu, aby ich nie używać.
T Nguyen,

Odpowiedzi:


513

Spróbuj tego:

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

4
Wspaniały. To poprawna odpowiedź, ponieważ w zasadzie zastępuje live / on.
Mahn

3
@CalvinL Jeśli
Terry,

5
W tym rozwiązaniu nie podoba mi się to, że nie możesz mieć wielu konfiguracji podpowiedzi. Na przykład nie działa, jeśli masz podpowiedzi umieszczone na górze, a inne na dole.
barbolo

7
@barbolo, po prostu użyj różnych selektorów dla różnych konfiguracji. To jest właściwe rozwiązanie. Btw, działa również z Popover.
Enrico Carlesso,

16
bootstrap 3 użyj $ ('body'). tooltip ({selector: '[data-toggle = tooltip]'});
MERT DOĞAN

148

Jeśli masz wiele konfiguracji podpowiedzi, które chcesz zainicjować, działa to dla mnie dobrze.

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

Następnie można ustawić właściwość dla poszczególnych elementów za pomocą dataatrybutów.


3
Świetna wskazówka. Musiałem zmienić go na $ („body”). Tooltip ({selector: '[data-toggle = "tooltip"]'});
Jafin

2
Tak powinno być z Bootstrap 3. Świetnie!
ponury

świetny! do użytku wewnątrz tabeli dodaj pojemnik: „body”, aby uniknąć dodatkowej szerokości.
shock_gone_wild

To działa naprawdę dobrze. Próbowałem całej masy rzeczy na dynamicznym stole, ale nic tak naprawdę nie działało.
AnBisw

Działa również z Bootstrap 4!
Eugene Kulabuhov

17

Dla mnie tylko złapanie zdarzenia mouseenter było trochę błędne, a podpowiedź nie wyświetlała się / ukrywała poprawnie. Musiałem to napisać, a teraz działa idealnie:

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

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

3
To było bardzo pomocne na miejscu, dlaczego .on ('hover') nie działa poprawnie.
Adam

To wszystko, czego potrzebowałem do mojej implementacji przy użyciu handlebars.js. Jeśli nie korzystałem z pliku handlebars.js, zaakceptowana odpowiedź również działała.
HPWD,

Tak właśnie robiłem, ale tracisz wiele opcji, takich jak opóźnienia po najechaniu myszą, które musiałbyś zaimplementować ręcznie przy tym, jak sądzę.
DavidScherer

16

Tutaj opublikowałem dłuższą odpowiedź: https://stackoverflow.com/a/20877657/207661

TL; DR: Potrzebujesz tylko jednego wiersza kodu, który działa w zdarzeniu gotowości do dokumentu:

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

Inne, bardziej skomplikowane kody sugerowane w innych odpowiedziach nie wydają się konieczne (przetestowałem to z Bootstrap 3.0).


1
To najlepsza odpowiedź.
Chris Marisic

To zadziałało w mojej sprawie. Użyłem tabeli z Tablesorter 2.26.2 i zapełniłem wartości poprzez wywołanie Ajax. Problem polegał na tym, że podpowiedź HTML była wyświetlana jako tekst HTML zamiast renderowanego wyniku. To jedyne rozwiązanie, które zadziałało dla mnie za pierwszym razem. +1 i wielkie dzięki!
Anurag

8

Dla mnie ten js odtwarza ten sam problem, co dzieje się z Paolą

Moje rozwiązanie:

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

2

Zamiast przeszukiwać go w całości. Myślę, że wystarczy użyć opcji dynamicznego tytułu już dostępnej w takich scenariuszach. Myślę, że:

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

1

Znalazłem kombinację tych odpowiedzi, która dała mi najlepszy wynik - pozwalając mi nadal pozycjonować etykietkę i dołączać ją do odpowiedniego pojemnika:

$('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');
});

Odpowiedni HTML:

<button rel="tooltip" class="btn" data-placement="bottom" data-container=".some-parent" title="Show Tooltip">
    <i class="icon-some-icon"></i>
</button>
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.