通过单击替换工具提示（引导）文本

Question

我试图在单击实际按钮时更改引导工具提示按钮的文本，然后在鼠标不在按钮上方以动态返回工具提示的默认文本后。我在使用 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 sn-p 中的另一个问题是屏幕顶部按钮的位置，这导致工具提示无法正确显示，我将工具提示方向更改为底部以修复它。

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