jQuery 如何使 Bootstrap 3 工具提示与文档中的显示相同
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19352768/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make the Bootstrap 3 tooltip appear the same as in the documentation
提问by lozadaOmr
On Twitter Bootstrap 3, when you look at the Tooltip it appears like the one below.
在 Twitter Bootstrap 3 上，当您查看工具提示时，它看起来像下面的那个。
When I tried doing it. This is how the tooltip appears.
当我尝试这样做时。这就是工具提示的显示方式。
This is the code I used.
这是我使用的代码。
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
Tooltip on left
</button>
Update
更新
This is my JS code
这是我的JS代码
$('#tooltip1').tooltip('options')
回答by hcoat
You need to put the Tooltip on leftin data-original-title="Tooltip on left"and id="tooltip1"to match your script.
你需要把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>
It was not working because your script references an id that you did not have and 'option' as a string. options should be blank or something like 'show' or 'hide' but in your case it will work blank.
它不起作用，因为您的脚本引用了您没有的 id 并且将“选项”作为字符串。选项应该是空白的或者像“显示”或“隐藏”之类的东西，但在你的情况下它会是空白的。
change:
改变：
$('#tooltip1').tooltip('options')
to:
到：
$('#tooltip1').tooltip();
be sure to include the semi-colon.
一定要包括分号。
UPDATE:Here is a simple example
更新：这是一个简单的例子
<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>
See Example: bootply
参见示例：bootply
回答by jcry87
You need the "data-placement" with value "left"
您需要值为“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>
Remember to load the tooltip to all the place with data-toggle="tooltip", you need write with jQuery before of close the this sentence :
记得用 data-toggle="tooltip" 把 tooltip 加载到所有地方，你需要在关闭这句话之前用 jQuery 写：
<script type="text/javascript">
$(document).ready(function() {
// Tooltip
$('[data-toggle="tooltip"]').tooltip();
});
</script>
回答by Daniel
I couldn't get this to work for me either until I changed the $ to jQuery. Once I changed it, the default bootstrap tooltip showed properly for me. So do this in your Javascript:
在我将 $ 更改为 jQuery 之前，我也无法让它为我工作。一旦我改变了它，默认的引导工具提示就会正确地显示出来。所以在你的 Javascript 中这样做：
<script type="text/javascript">
jQuery(document).ready(function() {
// Tooltip
jQuery('[data-toggle="tooltip"]').tooltip();
});
</script>
I hope that helps someone out!
我希望能帮助别人！
