наконечник бутстрапа не прикрепляется к кнопке, на которую нажимается

Question

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

вот пример значка действия.

<span name="no_quote_action" class="btn btn-xs btn-action " style="border: none" 
      rel="tooltip" data-placement="right" data-trigger="hover" 
      title="No-Quote this line" onclick="setNoQuote(this)"> 
      <span class="glyphicon glyphicon-remove" style="color: #ff0000"></span> 
    </span> 

На странице есть тег сценария, который описывает два действия.

<script> 
function setNoQuote(_this) { 
    var button = $(_this); 
    button.children().attr('class', 'glyphicon glyphicon-plus'); 
    button.children().css('color', '#00ff00'); 
    button.attr('onclick', 'setDoQuote(this)'); 

    button.tooltip('destroy'); 
// button.attr('data-original-title', 'Undo No-Quote'); 
    button.attr('title', 'Undo No-Quote'); 
    setTips(); 
} 

function setDoQuote(_this) { 
    var button = $(_this); 
    button.children().attr('class', 'glyphicon glyphicon-remove'); 
    button.children().css('color', '#ff0000'); 
    button.attr('onclick', 'setNoQuote(this)'); 
    button.tooltip('destroy'); 
    // button.attr('data-original-title', 'No-Quote this line'); 
    button.attr('title', 'No-Quote this line'); 
    setTips(); 
} 

function setTips() { 
    $('[rel="tooltip"]').tooltip({html: true}); 
} 

$(window).load(function() { 

    setTips(); 

}); 

Проблема я вижу в том, что, в то время как значок меняется, и предыдущая подсказка разрушено, setTips(); вызова успешно не добавить новую подсказку к иконе, которая была нажата. Это похоже на проблему с синхронизацией или что-то еще, потому что вызов setTips() вручную после завершения события работает должным образом.

Ниже приведена полная страница примеров HTML, которая демонстрирует проблему.

http://blake.bitlagoon.com

Следует также отметить, нажав в быстрой последовательности будут давать разные результаты.

Пожалуйста, помогите мне понять, что происходит и почему. Какую наилучшую практику я должен использовать, чтобы избежать таких проблем?

Answer 1

заменить это:

setTips(); 

с:

button.tooltip({html: true}); 

, если это все еще не работает, то добавляем обе строки

button.tooltip({html: true}); 
button.tooltip('show'); 

Answer 2

Ну, несмотря на не по-настоящему понять, почему оригинал код не работал, как ожидалось, я придумал решение, которое, кажется, работает хорошо.

Разбирая действие переустановки подсказки инструмента из исходной кнопки, нажмите кнопку «Событие», все работает нормально. Таким образом, трюк заключается в том, чтобы обернуть вызов функции setTips() в функции обратного вызова таймера.

setTimeout(function(){ 
     setTips(); 
    }, 300); 

В расширительном, я предполагаю, что в более сложном случае или если было принято решение о том, что с помощью задержки не хотелось, я готов держать пари, я мог стрелять другой асинхронное событие, чтобы вызвать setTips() поведение и что будет вероятно, отлично работает. Но я не собираюсь проверять это на данный момент, так как задержка работает достаточно хорошо для моей цели.

Мне просто жаль, что я не знал, почему вызов .tooltip() в контексте события на объекте запрещает правильную настройку всплывающей подсказки на этом объекте.