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片段中的另一个问题是屏幕顶部按钮的位置，这导致工具提示无法正确显示，我将工具提示方向更改为底部以修复它。

＆＃13;

$(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');
  });

});

＆＃13;

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

＆＃13;

单击

1 个答案: