Question

我遇到了一个问题，我想更改工具提示的文字，但似乎没有这样做，相反，如果你将鼠标悬停在文本“你的新标题”上。我只想更改文本以及将鼠标悬停在显示的文本上。

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
  $("#tool").attr('title', 'your new title');
});

<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h3>Tooltip Example</h3>
  <a href="#" id="button" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>

Answer 1

jQuery的tooltip()插件会在工具提示元素上创建data-original-title属性，并将该元素的title属性的初始内容复制到其中。

data-original-title的动态更改会反映在工具提示中，而title中的更改不会影响它（在它已经初始化之后）。

＆＃13;

$(document).ready(function() {
  $('[data-toggle="tooltip"]').tooltip();
  $("#button").attr('data-original-title', 'your new title');
});

＆＃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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <h3>Tooltip Example</h3>
  <a href="#" id="button" data-toggle="tooltip" title="Hooray!">Hover over me</a>
</div>

＆＃13;

Bootstrap工具提示文本更改

1 个答案: