Question

在Twitter Bootstrap 3上，当您查看工具提示时，它看起来就像下面的那个。

This is what appears on the Documentation

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

enter image description here

这是我使用的代码。

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

Answer 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和'option'作为字符串。选项应为空白或类似“显示”或“隐藏”的选项，但在您的情况下，它将为空白。

变化：

$('#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

Answer 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”将工具提示加载到所有位置，在关闭此句之前需要使用jQuery编写：

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

Answer 3

在我将$更改为jQuery之前，我无法让这个为我工作。一旦我改变它，默认的bootstrap工具提示显示适合我。所以在你的Javascript中这样做：

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

我希望能帮助别人！

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

3 个答案: