Mam podpowiedź dotyczącą elementu kotwicy, który wysyła żądanie AJAX po kliknięciu. Ten element ma etykietkę (z Twittera Bootstrap). Chcę, aby treść podpowiedzi zmieniła się po pomyślnym zwróceniu żądania AJAX. Jak mogę manipulować etykietką po inicjacji?
224
$(element).attr('title', 'NEW_TITLE').tooltip('fixTitle').tooltip('show');
$(element).attr('data-original-title', newValue).tooltip('show');
było dla mnie najprostszym działającym rozwiązaniem.W Bootstrap 3 wystarczy wywołać,
elt.attr('data-original-title', "Foo")
ponieważ zmiany w"data-original-title"
atrybucie już powodują zmiany w wyświetlaniu podpowiedzi.AKTUALIZACJA: Możesz dodać .tooltip („pokaż”), aby natychmiast pokazać zmiany, nie musisz najeżdżać myszką i najeżdżać kursorem myszy, aby zobaczyć zmianę w tytule
źródło
.tooltip('show');
, aby wyświetlała się po aktualizacjimożesz zaktualizować tekst podpowiedzi bez wywoływania show / hide:
źródło
.tooltip('show')
działało dla mnie na końcu łańcucha.setContent
ishow
załatwia sprawę! możesz zmienićdata-original-title
bezpośrednio zamiast używaćfixTitle
oto dobre rozwiązanie, jeśli chcesz zmienić tekst bez zamykania i ponownego otwierania podpowiedzi.
w ten sposób tekst zamieniany jest bez zamykania podpowiedzi (nie zmienia położenia, ale jeśli zmieniasz jedno słowo itp., powinno być dobrze). a kiedy najedziesz myszką na + podpowiedź, jest ona nadal aktualizowana.
** to jest bootstrap 3, dla 2 prawdopodobnie musisz zmienić nazwy danych / klas
źródło
$tip
nie jest atrybutem$(element)
$(element).attr('title', newTitle).tooltip('fixTitle').parent().find('.tooltip .tooltip-inner').text(newTitle);
dla Bootstrap 4:
źródło
Działa to, jeśli instancja podpowiedzi została utworzona (prawdopodobnie za pomocą javascript):
źródło
$('#tooltip_id').data('bs.tooltip').options.title = 'New_value!';
Dla bootstrap 3.x
To wydaje się najczystszym rozwiązaniem:
Program Show służy do natychmiastowej aktualizacji tytułu i nie czeka na ukrywanie podpowiedzi i wyświetlenie jej ponownie.
źródło
Oto aktualizacja Bootstrap 4 :
Ale najlepszym sposobem jest zrobienie tego w następujący sposób:
lub inline:
Po stronie UX widać tylko, że tekst jest zmieniany bez efektów blaknięcia lub ukrywania / pokazywania i nie ma takiej potrzeby
_fixTitle
.źródło
Możesz po prostu zmienić
data-original-title
następujący kod:źródło
Bootstrap 4
https://getbootstrap.com/docs/4.1/components/tooltips/#tooltipdispose
źródło
Poniższe działało dla mnie najlepiej, w zasadzie usuwam wszystkie istniejące podpowiedzi i nie zawracam sobie głowy wyświetlaniem nowej podpowiedzi. Jeśli wywołujesz show w podpowiedzi, tak jak w innych odpowiedziach, wyskakuje, nawet jeśli kursor nie unosi się nad nim.
Powodem, dla którego zdecydowałem się na to rozwiązanie, jest to, że inne rozwiązania, ponownie wykorzystujące istniejącą etykietkę, doprowadziły do dziwnych problemów z etykietką, która czasami nie wyświetlała się po najechaniu kursorem nad element.
źródło
data('bs.tooltip')
zamiastdata('tooltip')
W bootstrap 4 po prostu używam,
$(el).tooltip('dispose');
a następnie odtwarzam jak zwykle. Możesz więc umieścić dispose przed funkcją, która tworzy etykietkę, aby mieć pewność, że się nie podwoi.Konieczność sprawdzania stanu i majsterkowania z wartościami wydaje się mniej przyjazna.
źródło
Możesz ustawić zawartość w wywołaniu podpowiedzi za pomocą funkcji
Nie musisz używać tylko tytułu wywoływanego elementu.
źródło
Dzięki temu ten kod był dla mnie bardzo pomocny, okazał się skuteczny w moich projektach
$(element).attr('title', 'message').tooltip('fixTitle').tooltip('show');
źródło
Zniszcz wszelkie istniejące wcześniej podpowiedzi, abyśmy mogli ponownie wypełnić nową zawartość podpowiedzi
źródło
Nie udało mi się uzyskać odpowiedzi, oto obejście:
źródło
Myślę, że Mehmet Duran ma prawie rację, ale wystąpiły pewne problemy podczas korzystania z wielu klas z tą samą etykietką i ich rozmieszczeniem. Poniższy kod pozwala również uniknąć błędów js podczas sprawdzania, czy istnieje jakaś klasa o nazwie „tooltip_class”. Mam nadzieję że to pomoże.
źródło
Zmień tekst, zmieniając bezpośrednio tekst w elemencie. (nie aktualizuje pozycji podpowiedzi).
Zmień tekst, niszcząc stary podpowiedź, a następnie tworząc i pokazując nowy. (Powoduje, że stary znika, a nowy znika)
Używam najwyższej metody, aby animować „Zapisywanie”. wiadomość (za pomocą
 
aby podpowiedź nie zmieniała rozmiaru) i zmienić tekst na „Gotowe”. (plus dopełnienie) po zakończeniu żądania.źródło
To działało dla mnie: (bootstrap 3.3.6; jquery = 1.11.3)
Atrybut
data-html="true"
pozwala na użycie HTML w tytule podpowiedzi.źródło
Z obiektem Podpowiedź Boostrap:
źródło
W przypadku BS4 (i BS3 z niewielkimi zmianami) .. po godzinach poszukiwań i prób znalazłem najbardziej niezawodne rozwiązanie tego problemu, a nawet rozwiązuje problem otwierania więcej niż jednego (etykietka lub popover) w tym samym czasie, oraz problem z automatycznym otwieraniem po utracie ostrości itp.
źródło
Testowałem to tylko w bootstrap 4 i bez wywołania .show ()
źródło
możesz użyć tego kodu, aby ukryć podpowiedź, zmienić jej tytuł i ponownie wyświetlić podpowiedź, gdy żądanie ajax zwróci się pomyślnie.
źródło
Korzystam z tego łatwego wyjścia:
źródło
Przydaje się, jeśli trzeba zmienić tekst podpowiedzi po zainicjowaniu jej przy pomocy attr „data-original-title”.
źródło