Как обновить текст всплывающей подсказки Bootstrap 3 при каждом зависании?

Question

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

HTML Отрывок

<div id="title">App</div> 
    <button id="warningbtn" type="button" class="btn-default btn-sm" 
        data-toggle="errortip" data-placement="right" title=""> 
     <span class="glyphicon glyphicon-warning-sign"></span> 
    </button> 

JavaScript/JQuery:

function start(){ 
    let result = addon.start(); 
    if (result == -1){ 
     recentError = "Your license is invalid."; 
    } 
} 

$(document).ready(function(){ 

$('[data-toggle="errortip"]').tooltip({ 
    trigger : 'hover', 
    title: errorVariable 
}); 

Start вызывается из простой кнопки запуска на этой странице. recentError объявлен в верхней части .js-файла.

Спасибо за помощь!

Answer 1

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

$('#warningbtn').attr('data-original-title','something else'); 

Существует проблема сообщила здесь, и это, кажется, проблема с настройкой название подсказке динамически https://github.com/twbs/bootstrap/issues/14769

Answer 2

Попробуйте

$('#warningbtn').on('show.bs.tooltip', function() { 
    $('#warningbtn').tooltip({ 
     title: errorVariable 
    }) 
}); 

Answer 3

Вы можете использовать следующий код. Я обновил в соответствии с вашими требованиями. :

var recentError; 
 
\t function start() { 
 
\t \t var result = -1; 
 
\t \t if (result == -1) { 
 
\t \t \t recentError = "Your license is invalid."; 
 
\t \t } 
 
\t } 
 

 
\t $(document).ready(function() { 
 

 
\t \t $('[data-toggle="errortip"]').tooltip({ 
 

 
\t \t \t title : recentError 
 
\t \t }); 
 
\t }); 
 
\t start();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script> 
 
<div id="title">App</div> 
 
\t <button id="warningbtn" type="button" class="btn-default btn-sm" 
 
\t \t data-toggle="errortip" data-placement="right" title=""> 
 
\t \t <span class="glyphicon glyphicon-warning-sign"></span> 
 
\t </button>

Answer 4

Вы можете использовать атрибут данных оригинал-название на show.bs.tooltip события:

var errorVariable = Date.now() % 100; 
 

 
$(function() { 
 
    $('[data-toggle="errortip"]').tooltip({ 
 
    trigger : 'hover', 
 
    title: errorVariable 
 
    }).on('show.bs.tooltip', function(e) { 
 
    $(this).attr('data-original-title', errorVariable); 
 
    }); 
 

 
    $('#myBtn').on('click', function(e) { 
 
    errorVariable = Date.now() % 100; 
 
    }); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<button type="button" class="btn-default btn-sm" id="myBtn">Click Me to create a random tooltip message</button> 
 
<div id="title">App</div> 
 
<button id="warningbtn" type="button" class="btn-default btn-sm" 
 
     data-toggle="errortip" data-placement="right" title=""> 
 
    <span class="glyphicon glyphicon-warning-sign"></span> 
 
</button>