如何更新每個懸停的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 
}); 

開始從頁面上簡單的啓動按鈕調用。 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事件中使用data-original-title屬性：

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>