Bootstrap 3.0 Popovers和工具提示

Question

I am new to Bootstrap and I'm having trouble getting the popover and tooltip features to work. 我是Bootstrap的新手，我无法使用popover和tooltip功能。 I had no problem with the drop downs and models but I seem to be missing something for the popover and tooltips. 我对下拉和模型没有任何问题，但我似乎错过了popover和工具提示的东西。

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. 并且popover根本不工作。

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>

Answer 1

我在所有页面上都使用它来启用工具提示

$(function () { $("[data-toggle='tooltip']").tooltip(); });

Answer 2

Turns out that Evan Larsen has the best answer . 事实证明， Evan Larsen有最好的答案。 Please upvote his answer (and/or select it as the correct answer) - it's brilliant. 请upvote他的答案（和/或选择它作为正确答案） - 它很棒。

Working jsFiddle here 在这里工作jsFiddle

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. 在jsFiddle示例（上面的链接）中，我还添加了一个默认情况下一个工具提示（通过登录按钮）为ON的情况。 Also, the tooltip code is ADDED to the button in jQuery, not in the HTML markup. 此外，工具提示代码添加到jQuery中的按钮，而不是HTML标记。

Popovers do work 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/ 从这里获取Twitter Bootstrap CDN的参考： http ： //www.bootstrapcdn.com/
Paste each link into notepad and strip out ALL except the URL. 将每个链接粘贴到记事本中并除去URL以外的所有链接。 For example: 例如：
//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
In jsFiddle, on left side, open the External Resources accordion dropdown 在jsFiddle，在左侧，打开外部资源手风琴下拉列表
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...) 现在，打开“Frameworks＆Extensions”手风琴下拉列表，选择jQuery 1.9.1（或其中任何一个......）

NOW you are ready to go. 现在你准备好了。

Answer 3

Working with BOOTSTRAP 3 : Short and Simple 使用BOOTSTRAP 3：简短

Check - JS Fiddle 检查 - JS小提琴

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(); 
});

Answer 4

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的
jQuery UI jQuery UI
Bootstrap 引导

Answer 5

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

Answer 6

You just need to enable the tooltip: 您只需启用工具提示：

$('some id or class that you add to the above a tag').popover({
    trigger: "hover" 
})

Answer 7

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". 请注意，我使用了你的班级“btn-danger”。 You can create a different class, or use an id="someidthatimakeup" . 您可以创建不同的类，或使用id="someidthatimakeup" 。

Answer 8

If you're using Rails and ActiveAdmin, this is going to be your problem: https://github.com/seyhunak/twitter-bootstrap-rails/issues/450 Basically, 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资产移动到“vendor”目录中。

Bootstrap 3.0 Popovers和工具提示

问题描述

8 个解决方案

解决方案1
229 2013-08-23 20:47:54

解决方案2
146 已采纳 2013-08-30 16:31:53

解决方案3
26 2014-01-12 09:59:07

Working with BOOTSTRAP 3 : Short and Simple 使用BOOTSTRAP 3：简短

解决方案4
6 2014-04-03 18:08:44

解决方案5
5 2014-09-08 20:21:30

解决方案6
0 2013-08-23 20:16:01

解决方案7
0 2013-08-23 20:23:08

解决方案8
0 2015-05-04 05:41:57

Bootstrap 3.0 Popovers和工具提示

问题描述

8 个解决方案

解决方案1 229 2013-08-23 20:47:54

解决方案2 146 已采纳 2013-08-30 16:31:53

解决方案3 26 2014-01-12 09:59:07

Working with BOOTSTRAP 3 : Short and Simple 使用BOOTSTRAP 3：简短

解决方案4 6 2014-04-03 18:08:44

解决方案5 5 2014-09-08 20:21:30

解决方案6 0 2013-08-23 20:16:01

解决方案7 0 2013-08-23 20:23:08

解决方案8 0 2015-05-04 05:41:57

解决方案1
229 2013-08-23 20:47:54

解决方案2
146 已采纳 2013-08-30 16:31:53

解决方案3
26 2014-01-12 09:59:07

解决方案4
6 2014-04-03 18:08:44

解决方案5
5 2014-09-08 20:21:30

解决方案6
0 2013-08-23 20:16:01

解决方案7
0 2013-08-23 20:23:08

解决方案8
0 2015-05-04 05:41:57