如何在每次悬停时更新Bootstrap 3工具提示文本

How to update Bootstrap 3 tooltip text on each hover?

本文关键字：Bootstrap 更新 工具提示 文本 悬停      更新时间：2023-09-26

我想只是简单地更新每次悬停在显示前的工具提示。我有一个警告图标，弹出，如果有一个错误，在悬停，我希望最近的错误显示。但是，我所拥有的不起作用。

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文件的顶部声明。

谢谢你的帮助!

您可以在需要工具提示的新值时设置此属性:

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

这里报告了一个问题，似乎是动态设置工具提示标题的问题https://github.com/twbs/bootstrap/issues/14769

您可以在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>

试试这个

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

您可以使用以下代码。我已经按照你的要求更新了：

var recentError;
	function start() {
		var result = -1;
		if (result == -1) {
			recentError = "Your license is invalid.";
		}
	}
	$(document).ready(function() {
		$('[data-toggle="errortip"]').tooltip({
			title : recentError
		});
	});
	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>
	<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>

相关文章：