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

您可以在show.bs.tooltip事件中使用data-original-title属性：

＆＃13;

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;
  });
});

＆＃13;

<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>

＆＃13;

Answer 3

试试这个

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

Answer 4

您可以使用以下代码。我已根据您的要求更新。：

＆＃13;

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();

＆＃13;

<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>

＆＃13;

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

4 个答案: