Bootstrap 3.0 Popovers和工具提示
我是Bootstrap的新手，我无法使popover和tooltipfunction正常工作。 我没有问题的下拉菜单和模型，但我似乎失去了popover和工具提示的东西。
我得到的工具提示出现，但他们不是样式和位置像引导示例。 而popover根本不工作。
请看一下，让我知道我失踪了。
<!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="jquery-latest.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> 原来， 埃文·拉森有最好的答案 。 请提出他的答案（和/或select它作为正确的答案） – 这是辉煌的。
在这里工作jsFiddle
使用Evan的技巧，你可以用一行代码实例化所有的工具提示：
$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});
您将会看到，长篇文章中的所有工具提示都只有这一行的工具提示。
在jsFiddle示例（上面的链接）中，我还添加了一个情况，默认情况下，一个工具提示（通过loginbutton）为ON。 此外，工具提示代码被添加到jQuery中的button，而不是在HTML标记中。
Popovers与工具提示的工作方式相同：
$('[data-toggle="popover"]').popover({trigger: 'hover','placement': 'top'});
在那里，你有它！ 终于成功了。
解决这个问题的最大问题之一就是用jsFiddle做bootstrap工作…这是你必须做的：
- 从这里获取Twitter Bootstrap CDN的参考资料： http ： //www.bootstrapcdn.com/
- 将每个链接粘贴到记事本中，然后去除URL以外的所有链接。 例如：
bootstrap/3.0.0/css/bootstrap.min.css - 在jsFiddle的左侧，打开External Resources accordion下拉菜单
- 粘贴每个url，每次粘贴后按加号
- 现在，打开“Frameworks＆Extensions”手风琴下拉菜单，selectjQuery 1.9.1（或者其中的一个）
现在你已经准备好了。
我在我的所有页面上使用这个来启用工具提示
$(function () { $("[data-toggle='tooltip']").tooltip(); });
使用BOOTSTRAP 3：简单和简单
检查 – 小提琴小提琴
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
$(function () { $("[data-toggle='tooltip']").tooltip(); });
我必须在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 }); });
并改变我的加载顺序是：
- jQuery的
- jQuery UI
- 引导
出于某种原因，我能够让我的代码工作的唯一方法是切换几件事情。 如果到目前为止没有为你工作，请给这个：
$('body').popover({ selector: '[data-toggle="popover"]', trigger: 'hover', placement: 'right' });
在脚本中有一个语法错误，正如xXPhenom22Xx所指出的那样，您必须实例化工具提示。
<script type="text/javascript"> $(document).ready(function() { $('.btn-danger').tooltip(); }); //END $(document).ready() </script>
请注意，我使用了“btn-danger”类。 你可以创build一个不同的类，或者使用一个id="someidthatimakeup" 。
你只需要启用工具提示：
$('some id or class that you add to the above a tag').popover({ trigger: "hover" })
如果你使用Rails和ActiveAdmin，这将是你的问题： https : //github.com/seyhunak/twitter-bootstrap-rails/issues/450基本上，与active_admin.js冲突
这是解决scheme： https ：//stackoverflow.com/a/11745446/264084（凯伦的答案）tldr：将active_admin资产移动到“供应商”目录。
