JavaScript 到活动 Twitter Bootstrap 工具提示

Question

我正在使用 Twitter Bootstrap 的 工具提示，但自从它们移动后我遇到了问题远离特威普西。页面中包含正确的 JavaScript。

假设我有以下内容：

<p><a href="#" rel="tooltip" data-original-title="hello">hover on me</a></p>

我需要使用什么确切 JavaScript 来显示工具提示？

提前致谢！

• 凡妮莎

Answer 1

您需要为所有必须具有工具提示的元素显式运行 .tooltip()。例如，这将起作用：

<span rel="tooltip" title="tooltip text">some text</span>
...
<script src="/js/jquery.js"></script>
<script src="/js/bootstrap.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
    $("[rel=tooltip]").tooltip();
  });
</script>

Answer 2

对于您的示例，它只是：

$('a').tooltip();

但根据文档，您应该使用 title 属性，而不是 data-original-title。该属性是由 Bootstrap 的工具提示代码添加的。也不需要 rel="tooltip"。

你的代码应该是：

HTML:

<a href="#" title="hello">hover on me</a>

JS:

$("a").tooltip(); // this will trigger a tooltip on all <a> elements

Answer 3

在 Bootstrap 中，我们还需要手动初始化

其文档中提到的工具提示。

 <script type="text/javascript">
$(function () {
    $("[data-toggle='tooltip']").tooltip();
});</script>

Answer 4

你需要准确地

  <script src="bootstrap-tooltip.js "></script>
  <script>
    $(function (){
$('a').tooltip();
 });