我是Bootsrap的新手,我刚刚开始了解它。我正在尝试使用tooltip javascript实用程序,我已经完成了根据网页,我看到的源代码和我在这里找到的一些答案所做的一切,但是它不起作用。
这是我打算在HTML中使用它的地方:
<!-- Hola mundo -->
<div class="row">
<div class="starter-template tab-content">
<div class="tab-pane fade in active tooltip-demo" id="home">
<h1>¡Hola, mundo!</h1>
<p class="lead">Nunc sit amet nunc dui. <a href="#" data-toggle="tooltip" data-original-title="Pista 1">Aliquam</a> nec viverra mi, et pellentesque sem. In dapibus sem ut consectetur dignissim. </p>
</div>
<!-- /div#home -->
</div>
<!-- /div.starter-template -->
</div>
<!-- /div.row -->
由于需要手动加载实用程序,这就是我所做的:
<script>
$(document).ready(function (){
$('.tooltip-demo').tooltip({
selector: "[data-toggle=tooltip]",
container: "body"
})
});
在加载jQuery之后,此脚本将加载到页面的页脚。
答案 0 :(得分:22)
在Bootstrap 3中,您可以更轻松地完成此操作,而无需初始化$(document)
部分。
将html更改为
<a href="#" data-toggle="tooltip" title="pista 1"> Aliquam</a>
脚本中的
$('[data-toggle="tooltip"]').tooltip({'placement': 'bottom'});
注意:您可以更改展示位置,文档中的所有here都有各种选项
答案 1 :(得分:6)
bootstrap tool-tip它与jquery ui不兼容! 如果你正在使用jquery ui删除它!