5

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

这是文档中出现的内容

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

在此处输入图像描述

这是我使用的代码。

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

3 回答 3

11

您需要放入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

于 2013-10-14T02:59:00.077 回答
1

您需要值为“left”的“data-placement”

<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>
于 2013-10-14T04:12:56.143 回答
0

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

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

我希望能帮助别人！

于 2015-09-10T19:53:51.763 回答