引导工具提示不工作

我快疯了。

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

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

谢谢你的帮助!

当前回答

在遇到同样的问题后，我发现这个解决方案可以工作，无需在Bootstrap所需属性之外添加额外的标记属性。

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

$(document).ready(function() {
    $("body").tooltip({ selector: '[data-toggle=tooltip]' });
});

2014-03-21 20:54:43

其他回答

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

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

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

2012-02-26 14:14:51

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

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

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

2012-07-06 08:20:35

工具提示和弹出窗口不仅仅是css插件，比如下拉菜单或进度条。要使用工具提示和弹出窗口，你必须使用jquery(阅读javascript)激活它们。

假设我们想要在点击html按钮时显示一个弹出窗口。

<a href="#" role="button" 
     class="btn popovers-to-be-activated" 
     title="" data-content="And here's some amazing content." 
     data-original-title="A Title" "
>button</a>

然后你需要有以下javascript代码来激活弹出窗口:

$('.popovers-to-be-activated').popover();

实际上，上面的javascript代码将在所有具有类“popover -to- activated”的html元素上激活弹出窗口。

不用说，把上面的javascript放在DOM-ready回调中，一旦DOM准备好就激活所有弹出窗口:

$(function() {
 // Handler for .ready() called.
 $('.popovers-to-be-activated').popover();
});

2013-05-01 10:07:37

在遇到同样的问题后，我发现这个解决方案可以工作，无需在Bootstrap所需属性之外添加额外的标记属性。

HTML

<a href="#" data-toggle="tooltip" title="Title Here">Hyperlink Text</a>

JQuery

$(document).ready(function() {
    $("body").tooltip({ selector: '[data-toggle=tooltip]' });
});

2014-03-21 20:54:43

将代码放入文档中

$(document).ready(function () {
    if ($("[rel=tooltip]").length) {
        $("[rel=tooltip]").tooltip();
    }
});

在我的情况下，我也错过了http://twitter.github.com/bootstrap/assets/css/bootstrap.css上的css类工具提示儿子，别忘了这一点。

2012-05-30 18:27:25

引导工具提示不工作

推荐文章

最新文章

标签