jQuery Bootstrap 3.0 弹出框和工具提示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18410922/
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
Bootstrap 3.0 Popovers and tooltips
提问by user2560895
I am new to Bootstrap and I'm having trouble getting the popover and tooltip features to work. I had no problem with the drop downs and models but I seem to be missing something for the popover and tooltips.
我是 Bootstrap 的新手，无法使弹出窗口和工具提示功能正常工作。我对下拉菜单和模型没有任何问题，但我似乎缺少弹出框和工具提示的某些内容。
I am getting tooltips to show up but they are not styled and located like the bootstrap examples. And the popover is not working at all.
我正在显示工具提示，但它们的样式和位置与引导程序示例不同。弹出窗口根本不起作用。
Please take a look and let me know what I am missing.
请看一看，让我知道我错过了什么。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
<link href="css/font-awesome.min.css" rel="stylesheet" media="screen">
<link href="css/index.css" rel="stylesheet" media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<p id="tool"class="muted" style="margin-bottom: 0;">
Tight pants next level keffiyeh
<a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
<h3>Live demo</h3>
<div style="padding-bottom: 24px;">
<a id="pop" href="#" class="btn btn-lg btn-danger" data-toggle="popover" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">Click to toggle popover</a>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript">
$(document).ready(function() {
$('.tool').tooltip();
$('.btn').popover();
}); //END $(document).ready()
</script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap.min.css"></script>
</body>
</html>
回答by Evan Larsen
I use this on all my pages to enable tooltip
我在所有页面上都使用它来启用工具提示
$(function () { $("[data-toggle='tooltip']").tooltip(); });
回答by cssyphus
Turns out that Evan Larsen has the best answer. Please upvote his answer (and/or select it as the correct answer) - it's brilliant.
事实证明，Evan Larsen 有最好的答案。请为他的答案点赞（和/或选择它作为正确答案）- 太棒了。
Using Evan's trick, you can instantiate all tooltips with one line of code:
使用 Evan 的技巧，您可以使用一行代码实例化所有工具提示：
$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});
You will see that all tooltips in your long paragraph have working tooltips with just that one line.
您将看到长段落中的所有工具提示都包含只有一行的有效工具提示。
In the jsFiddle example (link above), I also added a situation where one tooltip (by the Sign-In button) is ON by default. Also, the tooltip code is ADDED to the button in jQuery, not in the HTML markup.
在 jsFiddle 示例（上面的链接）中，我还添加了一种情况，其中一个工具提示（通过登录按钮）默认开启。此外，工具提示代码添加到 jQuery 中的按钮，而不是 HTML 标记中。
Popovers dowork the same as the tooltips:
Popovers做的工作一样的工具提示：
$('[data-toggle="popover"]').popover({trigger: 'hover','placement': 'top'});
And there you have it! Success at last.
你有它！终于成功了。
One of the biggest problems in figuring this stuff out was making bootstrap work with jsFiddle... Here's what you must do:
解决这些问题的最大问题之一是使引导程序与 jsFiddle 一起工作......这是你必须做的：
- Get reference for Twitter Bootstrap CDN from here: http://www.bootstrapcdn.com/
- Paste each link into notepad and strip out ALL except the URL. For example:
//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css - In jsFiddle, on left side, open the External Resources accordion dropdown
- Paste in each URL, pressing plus sign after each paste
- Now, open the "Frameworks & Extensions" accordion dropdown, and select jQuery 1.9.1 (or whichever...)
- 从这里获取 Twitter Bootstrap CDN 的参考：http: //www.bootstrapcdn.com/
- 将每个链接粘贴到记事本中并去除除 URL 之外的所有链接。例如：
//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css - 在 jsFiddle 的左侧，打开外部资源手风琴下拉菜单
- 粘贴每个 URL，在每次粘贴后按加号
- 现在，打开“Frameworks & Extensions”手风琴下拉菜单，然后选择 jQuery 1.9.1（或任何一个...）
NOW you are ready to go.
现在你准备好了。
回答by Abhishek Goel
Working with BOOTSTRAP 3 : Short and Simple
使用 BOOTSTRAP 3：简短而简单
Check - JS Fiddle
检查 - JS Fiddle
HTML
HTML
<div id="myDiv">
<button class="btn btn-large btn-danger" data-toggle="tooltip" data-placement="top" title="" data-original-title="Tooltip on top">Tooltip on top</button>
</div>
Javascript
Javascript
$(function () {
$("[data-toggle='tooltip']").tooltip();
});
回答by Jonathan
I had to do it on DOM ready
我必须在准备好 DOM 的情况下进行
$( document ).ready(function () { // this has to be done after the document has been rendered
$("[data-toggle='tooltip']").tooltip({html: true}); // enable bootstrap 3 tooltips
$('[data-toggle="popover"]').popover({
trigger: 'hover',
'placement': 'top',
'show': true
});
});
And change my load orders to be:
并将我的加载顺序更改为：
- jQuery
- jQuery UI
- Bootstrap
- jQuery
- 用户界面
- 引导程序
回答by santa
For some reason the only way I was able to get my code to work is by switching couple of things. If nothing worked for you so far, please give a whirl to this:
出于某种原因，我能够让我的代码工作的唯一方法是切换几件事情。如果到目前为止没有任何效果，请试一试：
$('body').popover({
selector: '[data-toggle="popover"]',
trigger: 'hover',
placement: 'right'
});
回答by Arcolye
If you're using Rails and ActiveAdmin, this is going to be your problem: https://github.com/seyhunak/twitter-bootstrap-rails/issues/450Basically, a conflict with active_admin.js
如果您使用 Rails 和 ActiveAdmin，这将是您的问题：https: //github.com/seyhunak/twitter-bootstrap-rails/issues/450基本上，与 active_admin.js 冲突
This is the solution: https://stackoverflow.com/a/11745446/264084(Karen's answer) tldr: Move active_admin assets into the "vendor" directory.
这是解决方案：https: //stackoverflow.com/a/11745446/264084（Karen 的回答） tldr：将 active_admin 资产移动到“供应商”目录中。
回答by xXPhenom22Xx
You just need to enable the tooltip:
您只需要启用工具提示：
$('some id or class that you add to the above a tag').popover({
trigger: "hover"
})
回答by cssyphus
You have a syntax error in your script and, as noted by xXPhenom22Xx, you must instantiate the tooltip.
您的脚本中有语法错误，如 xXPhenom22Xx 所述，您必须实例化工具提示。
<script type="text/javascript">
$(document).ready(function() {
$('.btn-danger').tooltip();
}); //END $(document).ready()
</script>
Note that I used your class "btn-danger". You can create a different class, or use an id="someidthatimakeup".
请注意，我使用了您的课程“btn-danger”。您可以创建不同的类，或使用id="someidthatimakeup".
