javascript - 通过单击替换工具提示( Bootstrap )文本

Question

我试图在单击实际按钮时更改 Bootstrap 工具提示按钮的文本，然后在鼠标不在按钮上方后动态返回工具提示的默认文本。我的 jquery 代码有问题。有人可以向我解释一下这些事情是如何运作的吗？我的想法是首先检查按钮是否被单击，然后检查是否要显示(更改默认的工具提示消息)，然后当鼠标不再位于按钮上方或未单击按钮时显示工具提示消息，但我不能把它的结构放在我的脑海里。 任何建议都非常受欢迎。

到目前为止，这是我的代码。

$(function() {
	var $toolTip = $('#tooltip-example');
	$toolTip.tooltip();

	$toolTip.click(function(){
		$myToolTip.attr('title', 'New Hello World Message').tooltip('fixTitle').tooltip('show');
	});

});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<button type="button" class="btn btn-default" id="tooltip-example" data-tooltip title="Hello world">Click me</button>

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

Answer 1

尝试如下。

我在您的示例中看到的唯一问题是 $myToolTip 未定义，您的意思必须是 $toolTip。

SO 代码片段中的另一个问题是按钮在屏幕顶部的位置，这导致工具提示无法正确显示，我将工具提示方向更改为底部来修复它。

$(function() {
  var $toolTip = $('#tooltip-example');
  var originalTitle = $toolTip.attr('title');
  $toolTip.tooltip({placement: "bottom"});

  $toolTip.click(function() {
    $toolTip.attr('title', 'New Hello World Message').tooltip('fixTitle').tooltip('show');
  });
  
  $(document).on("mouseout","#tooltip-example",function()
  {
    $toolTip.attr('title',originalTitle).tooltip('fixTitle').tooltip('show');
  });

});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-default" id="tooltip-example" data-tooltip title="Hello world">Click me</button>