如何使 Bootstrap 3 工具提示与文档中的显示相同答案

【问题标题】：How to make the Bootstrap 3 tooltip appear the same as in the documentation如何使 Bootstrap 3 工具提示与文档中的显示相同
【发布时间】：2013-10-14 02:44:23
【问题描述】：

在 Twitter Bootstrap 3 上，当您查看工具提示时，它会如下所示。

当我尝试这样做时。这就是工具提示的显示方式。

这是我使用的代码。

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

更新

这是我的 JS 代码

$('#tooltip1').tooltip('options')

【问题讨论】：

首先激活你的工具提示..$('#example').tooltip(options)
通过使用其数据切换属性]$(function () { $('[data-toggle="tooltip"]').tooltip() })，在任何地方启用工具提示。

标签： javascript jquery css twitter-bootstrap tooltip

【解决方案1】：

您需要将Tooltip on left 放入data-original-title="Tooltip on left" 和id="tooltip1" 以匹配您的脚本。

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

它不起作用，因为您的脚本引用了您没有的 id 和“选项”作为字符串。选项应该是空白的或类似“显示”或“隐藏”的东西，但在你的情况下它会为空白。

改变：

$('#tooltip1').tooltip('options')

到：

$('#tooltip1').tooltip();

一定要包含分号。

更新： 这是一个简单的例子

<html lang="en">
    <head>
        <title>
            Bootstrap Tool-Tip preview
        </title>
        <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"> 
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-md-offset-6">
                    <button data-original-title="Tooltip on left" data-placement="left" data-toggle="tooltip" class="btn btn-default" type="button" id="tooltip1">
                        Tooltip on left 
                    </button>
                </div>
            </div>
        </div>
        <script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" type="text/javascript"></script>
        <script id="bsJs" type="text/javascript">
        $(document).ready(function() {
            $('#tooltip1').tooltip();
        });
        </script> 
    </body>
</html>

参见示例：bootply

【讨论】：

但工具提示看起来仍然是相同的默认值。不是 Bootstrap 3 文档中的那个？
您的电话是否使用类似 $('button').tooltip(); ?这是必需的。如果您是，请向我们展示更多您的代码。
我确定我听从了你的建议，但现在连工具提示都没有显示，你能在bootply 中做到吗？它类似于 jsFiddle，但用于 Bootstrap。如果我不能理解，我很抱歉，我真的没有扎实的JS背景。并且刚刚开始研究它。
谢谢，终于成功了。有小问题。应该在 Bootstrap.js 之前首先包含 jQuery.js
是的，jquery 和 bootstrap 的顺序非常重要。 jQuery.js b4 Bootstrap.js

【解决方案2】：

您需要值为“left”的“数据放置”

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

记得用data-toggle="tooltip"把tooltip加载到所有地方，关闭这句话之前需要用jQuery写：

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

【讨论】：

我已经放置了数据放置和<script> 代码，但工具提示的外观仍然相同。就像一个普通的工具提示，而不是文档中的那个。

【解决方案3】：

在我将 $ 更改为 jQuery 之前，我也无法让它为我工作。一旦我更改了它，默认的引导工具提示就会正确显示给我。所以在你的 Javascript 中这样做：

<script type="text/javascript">
jQuery(document).ready(function() {
// Tooltip
        jQuery('[data-toggle="tooltip"]').tooltip();
});
</script>

希望对大家有所帮助！

【讨论】：