我快疯了。

我有以下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示例的源代码,在那里的任何地方都看不到任何启动工具提示的东西。所以我猜它应该可以工作,还是我错过了一些重要的东西?

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

谢谢你的帮助!


当前回答

我已经在头部添加了jquery和bootstrap-tooltip.js。在脚注中添加此代码对我有用!但是当我在标题中添加相同的代码时,它不起作用!

<script type="text/javascript">
$('.some-class').tooltip({ selector: "a" });
</script>

其他回答

总而言之:使用jQuery选择器激活工具提示

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

事实上,你不需要使用属性选择器,你可以在任何元素上调用它,即使它的标签中没有rel="tooltip"。

http://getbootstrap.com/javascript/#tooltips-usage

可选功能 出于性能考虑,工具提示和弹出窗口数据api是可选择的,这意味着

您必须自己初始化它们。

初始化页面上所有工具提示的一种方法是通过它们的data-toggle属性选择它们:

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

将这段代码放在HTML中可以使用工具提示

例子:

<!-- button -->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>

<!-- a tag -->
<a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>

你必须把工具提示javascript放在html后面。像这样:

<a href="#" rel="tooltip" title="Title Here"> I am Here</a>

<script>
$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

</script> 

或者使用$(document)。准备好:

$(document).ready(function() {

$("* [rel='tooltip']").tooltip({
   html: true, 
   placement: 'bottom'
});

});

</script>

工具提示不工作,因为你把工具提示html放在javascript之前,所以他们不知道是否有一个javascript的工具提示。在我看来,剧本是从头到尾读的。

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

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

这是最简单的方法。 把这个放在</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>