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

时间:2016-09-14 17:03:04

标签: javascript jquery twitter-bootstrap

我想在显示之前每次悬停时只更新工具提示。如果出现错误,我会弹出一个警告图标,并且在悬停时我会想要显示最近的错误。但是,我所做的并不起作用。

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

感谢您的帮助!

4 个答案:

答案 0 :(得分:8)

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

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

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

答案 1 :(得分:1)

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

&#13;
&#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;
&#13;
&#13;

答案 2 :(得分:0)

试试这个

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

答案 3 :(得分:0)

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

&#13;
&#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;
&#13;
&#13;