我快疯了。

我有以下HTML:

<a href="#" rel="tooltip" title="A nice tooltip">test</a>

引导样式的工具提示拒绝显示,只是一个普通的工具提示。

我有bootstrap。css工作得很好,我可以看到里面的类

我已经在我的HTML文件的末尾得到了所有相关的JS文件:

<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap-alert.js"></script>
<script src="bootstrap/js/bootstrap-modal.js"></script>
<script src="bootstrap/js/bootstrap-transition.js"></script>
<script src="bootstrap/js/bootstrap-tooltip.js"></script>

我已经查看了Bootstrap示例的源代码,在那里的任何地方都看不到任何启动工具提示的东西。所以我猜它应该可以工作,还是我错过了一些重要的东西?

我有模态和警报和其他东西工作得很好,所以我不是一个完全的白痴;)

谢谢你的帮助!


当前回答

在头部部分,您需要首先添加以下代码

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

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

然后在body部分中,您需要编写以下代码

<p>The data-placement attribute specifies the tooltip position.</p>
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Top</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Bottom</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Left</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Right</a></li>

其他回答

你不需要分开所有的js文件

如果你打算使用所有的引导函数,只需使用以下文件:

-bootstrap.css
-bootstrap.js

它们都可以在http://twitter.github.com上找到 最后 -最新版本的jquery.js


对于Glyphicons,您需要图像

Glyphicons-halfings.png和/或glyphicons-halfings-white.png(白色图像) 你需要在你的网站的/img/文件夹内上传(或)存储在任何你想要的地方,但在bootstrap.css内更改文件夹目录


对于工具提示,您需要在您的 <head> </head>标签

  <script type='text/javascript'>
     $(document).ready(function () {
     if ($("[rel=tooltip]").length) {
     $("[rel=tooltip]").tooltip();
     }
   });
  </script>

就是这样……

我知道这是一个老问题,但因为我有这个问题与新发布的引导,它在网站上不清楚,这里是如何启用工具提示。

给元素一个类似"tooltip-test"的类

然后在javascript标签中激活这个类:

<script type="text/javascript">
    $('.tooltip-test').tooltip();
</script>

<a href="#" class="tooltip-test" title="" data-original-title="Tooltip">This link</a>

如果你正在用javascript创建包含工具提示的html,然后将其插入到文档中,你必须在插入html到文档后激活弹出窗口/工具提示,而不是在文档加载时…

使用最新的Jquery库,如果你使用最新的bootstrap 2.0.4和Jquery -1.7.2.js,你不需要任何Jquery选择器

只需使用rel="tooltip" title="Your title " data-placement=" " "

根据您的意愿在数据放置中使用顶部/底部/左/右。

这是最简单的方法。 把这个放在</body>之前:

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

查看Bootstrap文档中给出的关于工具提示的示例。

例如:

<a href="#"
   data-toggle="tooltip"
   data-placement="bottom"
   title="Tooltip text here">Link with tooltip</a>