Zmień treść podpowiedzi Bootstrap na kliknięcie

224

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?

bunt
źródło

Odpowiedzi:

411

Właśnie to znalazłem dzisiaj podczas czytania kodu źródłowego. Wywołuje więc $.tooltip(string)dowolną funkcję w Tooltipklasie. A jeśli spojrzysz Tooltip.fixTitle, pobiera data-original-titleatrybut i zastępuje go wartością tytułu.

Po prostu wykonujemy:

$(element).tooltip('hide')
          .attr('data-original-title', newValue)
          .tooltip('fixTitle')
          .tooltip('show');

i oczywiście aktualizuje tytuł, który jest wartością w podpowiedzi.

Inny sposób (patrz komentarz @lukmdo poniżej):

$(element).attr('title', 'NEW_TITLE')
          .tooltip('fixTitle')
          .tooltip('show');
Mehmet Duran
źródło
5
Dzięki! To było zaskoczone przez godzinę.
gałązka
160
Lub nawet krótszy (gładszy)$(element).attr('title', 'NEW_TITLE').tooltip('fixTitle').tooltip('show');
lukmdo,
5
Możesz także zmienić tytuł za pomocą danych („etykietka”). Właściwość options, patrz stackoverflow.com/questions/10181847/...
James McMahon
4
Nie mogłem znaleźć dokumentacji dotyczącej „fixTitle”, więc myślę, że nie jest dobrym pomysłem, aby tego użyć !? ...
user2846569,
16
W rzeczywistości to nie działało, podpowiedź zmieniła wartości, a następnie szybko zniknęła. $(element).attr('data-original-title', newValue).tooltip('show');było dla mnie najprostszym działającym rozwiązaniem.
Gabe O'Leary
98

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

elt.attr('data-original-title', "Foo").tooltip('show');
Adriaan Tijsseling
źródło
5
Czysta odpowiedź, dlaczego nie ma ups: <
ays0110
3
Nie powoduje natychmiastowego zastosowania zmian, musisz najechać myszką i najechać kursorem myszy, aby zobaczyć nowy tekst tytułu
Lew Łukomsky
9
To właściwie najlepsza odpowiedź, którą możesz dodać .tooltip('show');, aby wyświetlała się po aktualizacji
Jared
Jest to jedyne rozwiązanie (spośród wielu wypróbowanych), które wydawało się po prostu działać (bs3). Dobre rozwiązanie na pewno!
jyoseph
3
To rozwiązanie jest lepsze niż wszystkie inne
Ayyaz Zafar
14

możesz zaktualizować tekst podpowiedzi bez wywoływania show / hide:

$(myEl)
    .attr('title', newTitle)
    .tooltip('fixTitle')
    .tooltip('setContent')
BenG
źródło
3
To .tooltip('show')działało dla mnie na końcu łańcucha.
markau
1
tak, setContenti showzałatwia sprawę! możesz zmienić data-original-titlebezpośrednio zamiast używaćfixTitle
brauliobo
Testowane na Bootstrap v2.3.1
Ricardo
13

oto dobre rozwiązanie, jeśli chcesz zmienić tekst bez zamykania i ponownego otwierania podpowiedzi.

$(element).attr('title', newTitle)
          .tooltip('fixTitle')
          .data('bs.tooltip')
          .$tip.find('.tooltip-inner')
          .text(newTitle)

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

ndreckshage
źródło
5
Mówi $tipnie jest atrybutem$(element)
Augustin Riedinger
Czy to:$(element).attr('title', newTitle).tooltip('fixTitle').parent().find('.tooltip .tooltip-inner').text(newTitle);
Augustin Riedinger
Aktualizuję podpowiedź na sąsiednim elemencie podczas pisania w polu tekstowym, a podpowiedź znika dla mnie z tym kodem po naciśnięciu klawisza.
tremby
Dzięki za to. Jedynym problemem związanym z tym rozwiązaniem jest to, że po zmianie tekstu wydaje się, że zmienia on pozycję podpowiedzi.
Wojciech Żyliński
13

dla Bootstrap 4:

$(element).attr("title", "Copied!").tooltip("_fixTitle").tooltip("show").attr("title", "Copy to clipboard").tooltip("_fixTitle");
Gitara basowa
źródło
3
Używa nieudokumentowanego interfejsu API. Strzec się.
Chloe,
9

Działa to, jeśli instancja podpowiedzi została utworzona (prawdopodobnie za pomocą javascript):

$("#tooltip_id").data('tooltip').options.title="New_value!";
$("#tooltip_id").tooltip('hide').tooltip('show');
Relacyjny
źródło
7
Z bootstrap 3 staje się$('#tooltip_id').data('bs.tooltip').options.title = 'New_value!';
ajbeaven
Hej relacyjny, czy mógłbyś zmienić swoją odpowiedź, aby odzwierciedlić poprawki w komentarzach? Dzięki.
thouliha
7

Dla bootstrap 3.x

To wydaje się najczystszym rozwiązaniem:

$(element)
  .attr('data-original-title', 'New title').tooltip('show')

Program Show służy do natychmiastowej aktualizacji tytułu i nie czeka na ukrywanie podpowiedzi i wyświetlenie jej ponownie.

empa
źródło
7

Oto aktualizacja Bootstrap 4 :

var title = "Foo";
elt.attr('data-original-title', title);
elt.tooltip('update');
elt.tooltip('show');

Ale najlepszym sposobem jest zrobienie tego w następujący sposób:

var title = "Foo";
elt.attr('title', title);
elt.attr('data-original-title', title);
elt.tooltip('update');
elt.tooltip('show');

lub inline:

var title = "Foo";
elt.attr('title', title).attr('data-original-title', title).tooltip('update').tooltip('show');

Po stronie UX widać tylko, że tekst jest zmieniany bez efektów blaknięcia lub ukrywania / pokazywania i nie ma takiej potrzeby _fixTitle.

Ivijan Stefan Stipić
źródło
6

Możesz po prostu zmienić data-original-titlenastępujący kod:

$(element).attr('data-original-title', newValue);
Morteza QorbanAlizade
źródło
6

Bootstrap 4

$('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show')

https://getbootstrap.com/docs/4.1/components/tooltips/#tooltipdispose

$('#topic_1').tooltip({title: 'Hello'}).tooltip('show');
setTimeout( function() {
  $('#topic_1').tooltip('dispose').tooltip({title: 'Goodbye'}).tooltip('show');
}, 5000);
#topic_1 {
  border: 1px solid red;
  margin: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>

<div id="topic_1">Topic 1</div>

Chloe
źródło
4

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.

function updateTooltip(element, tooltip) {
    if (element.data('tooltip') != null) {
        element.tooltip('hide');
        element.removeData('tooltip');
    }
    element.tooltip({
        title: tooltip
    });
}
aknuds1
źródło
1
Najlepsza odpowiedź na to pytanie.
Daniel Miliński
@ DanielMiliński Thanks :)
aknuds1
1
Jeśli używasz boostrap3, musisz użyć data('bs.tooltip')zamiastdata('tooltip')
Nigel Angel
3

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.

Martin Lyne
źródło
Czy powinniśmy wywoływać $ (el) .tooltip ('dispose') przed czy po aktualizacji tytułu podpowiedzi?
Fifi
@imabot usuń starą etykietkę, a następnie utwórz ponownie z nowymi danymi. Jeśli podpowiedzi są skomplikowane, możesz chcieć pobrać lub w inny sposób zapisać konfigurację początkową, aby móc ją ponownie utworzyć z tą konfiguracją + nowe wartości. Mam nadzieję, że to ma sens.
Martin Lyne,
2

Możesz ustawić zawartość w wywołaniu podpowiedzi za pomocą funkcji

        $("#myelement").tooltip({
            "title": function() {
                return "<h2>"+$("#tooltipcontainer").html()+"</h2>";
            }
        });

Nie musisz używać tylko tytułu wywoływanego elementu.

studio 42 francja
źródło
2

Dzięki temu ten kod był dla mnie bardzo pomocny, okazał się skuteczny w moich projektach

$(element).attr('title', 'message').tooltip('fixTitle').tooltip('show');

Szczęściarz
źródło
1

Zniszcz wszelkie istniejące wcześniej podpowiedzi, abyśmy mogli ponownie wypełnić nową zawartość podpowiedzi

$(element).tooltip("destroy");    
$(element).tooltip({
    title: message
});
jerin
źródło
1

Nie udało mi się uzyskać odpowiedzi, oto obejście:

$('#'+$(element).attr('aria-describedby')+' .tooltip-inner').html(newTitle);
Alex
źródło
0

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.

if (jQuery(".tooltip_class")[0]){    

        jQuery('.tooltip_class')
            .attr('title', 'New Title.')
            .attr('data-placement', 'right')
            .tooltip('fixTitle')
            .tooltip('hide');

    }
René Fernández
źródło
0

Zmień tekst, zmieniając bezpośrednio tekst w elemencie. (nie aktualizuje pozycji podpowiedzi).

$('.tooltip-inner', $element.next()).html(newHtml);
$('.tooltip-inner', $element.next()).text(newText);

Zmień tekst, niszcząc stary podpowiedź, a następnie tworząc i pokazując nowy. (Powoduje, że stary znika, a nowy znika)

$element
.tooltip('destroy')
.tooltip({
    // Repeat previous options.
    title: newText,
})
.tooltip('show');

Używam najwyższej metody, aby animować „Zapisywanie”. wiadomość (za pomocą&nbsp aby podpowiedź nie zmieniała rozmiaru) i zmienić tekst na „Gotowe”. (plus dopełnienie) po zakończeniu żądania.

$element.tooltip({
  placement: 'left',
  title: 'Saving...',
  trigger: 'manual',
}).tooltip('show');

var parent = $element.parent();
var interval_id = setInterval(function(){
    var text = $('.tooltip-inner', parent).html();
    switch(text) {
    case 'Saving.&nbsp;&nbsp;': text = 'Saving..&nbsp;'; break;
    case 'Saving..&nbsp;': text = 'Saving...'; break;
    case 'Saving...': text = 'Saving.&nbsp;&nbsp;'; break;
    }
    $('.tooltip-inner', parent).html(text);
}, 250);

send_request( function(){
    // When the request is complete
    clearInterval(interval_id);
    $('.tooltip-inner', parent).html('Done.&nbsp;&nbsp;&nbsp;&nbsp;');
    setTimeout(function() {
        $element.tooltip('hide');
    }, 1500 /* Show "Done." for a bit */);
});
Nate
źródło
0

To działało dla mnie: (bootstrap 3.3.6; jquery = 1.11.3)

<a id="alertTooltip" href="#" data-html="true" class="tooltip" data-toggle="tooltip" title="Tooltip message"></a>

<script>
  $('#alertTooltip').attr('title', "Tooltip new <br /> message").tooltip('fixTitle');
</script>

Atrybut data-html="true"pozwala na użycie HTML w tytule podpowiedzi.

omabra
źródło
0

Z obiektem Podpowiedź Boostrap:

$(element).attr('data-original-title', 'New value');
$(element).data('bs.tooltip').tip().find('.tooltip-inner').text('New value');
B.Asselin
źródło
0

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.

$('[data-toggle="tooltip"]').tooltip({
  trigger: 'hover'
}).on('shown.bs.tooltip', function() {
  var link = $(this);
  var data = '';
  data += '<ul style="list-style-type:none;margin:0;padding:0;text-align:left;font-size:12px">';
  data += '	<li>Sherif Salah</li>';
  data += '	<li>Muhammad Salah</li>';
  data += '	<li>and a gazillion more...</li>';
  data += '</ul>';
  link.attr('data-original-title', data);
  setTimeout(function() {
    if (link.is(':hover')) {
      link.tooltip("dispose").tooltip("show");
    }
  }, 1000);
});
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div class="card">
    <div class="card-body text-center">
      <a href="JavaScript:void(0);" class="btn btn-sm btn-link" data-toggle="tooltip" data-placement="top" data-html="true" title="Loading...">gazillion</a>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>

</html>

Sherif Salah
źródło
0

Testowałem to tylko w bootstrap 4 i bez wywołania .show ()

el.tooltip('hide').attr('data-original-title', 'message');
OBL
źródło
-1

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.

$(element).tooltip('hide');
$(element).attr('title','this is new title');
$(element).tooltip('fixTitle');
setTimeout(function() {  $(element).tooltip('show');}, 500);
Saifee
źródło
-1

Korzystam z tego łatwego wyjścia:

$(document).ready(function() {
    $("#btn").prop('title', 'Click to copy your shorturl');
});

function myFunction(){
  $(btn).tooltip('hide');
  $(btn).attr('data-original-title', 'Test');
  $(btn).tooltip('show');
});

Jerzy
źródło
-1
$(this).attr('data-original-title', 'click here to publish')
       .tooltip('fixTitle')
       .tooltip('show');

Przydaje się, jeśli trzeba zmienić tekst podpowiedzi po zainicjowaniu jej przy pomocy attr „data-original-title”.

Amina
źródło