JavaScript到Active Twitter Bootstrap工具提示

Question

我正在玩Twitter Bootstrap的工具提示 ，但是因為他們離開了Twipsy而遇到了問題。 更正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();
 });