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 的例子.而且爆米花一点也不管用.

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>

推荐答案

Turns out that Evan Larsen has the best answer. Please upvote his answer (and/or select it as the correct answer) - it's brilliant.

Working jsFiddle here

使用Evan的技巧,您可以用一行代码实例化所有工具提示:

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

你会看到,在你的长段落中,所有的工具提示都只有这一行.

在jsFdle示例(上面的链接)中,我还添加了一个工具提示(通过登录按钮)在默认情况下处于打开状态的情况.此外,工具提示代码被添加到jQuery中的按钮,而不是HTML标记中.


弹出窗口do的工作方式与工具提示相同:

$('[data-toggle="popover"]').popover({trigger: 'hover','placement': 'top'});

就在这里!终于成功了.

One of the biggest problems in figuring this stuff out was making bootstrap work with jsFiddle... Here's what you must do:

  1. 从这里获取Twitter bootstrap CDN的参考:http://www.bootstrapcdn.com/
  2. 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
  3. In jsFiddle, on left side, open the External Resources accordion dropdown
  4. Paste in each URL, pressing plus sign after each paste
  5. 现在,打开"框架和扩展"accordion下拉列表, Select jQuery 1.9.1(或任何一个…)

NOW you are ready to go.

Jquery相关问答推荐

逐个交换图像

如何在 jquery 中切换 attr()

加载外部 css 文件,如 jquery 中的脚本,这在 ie 中也兼容

jQuery 上传进度和 AJAX 文件上传

如何在 jQuery 中 Select 特定的表单元素?

仅在 _some 字段上通过 Enter 键禁用表单提交

在 `click` 和 `enter` 上触发事件

如何同时使用 requireJS 和 jQuery?

Zepto 和 jQuery 2 有什么区别?

字符串化(转换为 JSON)具有循环引用的 JavaScript 对象

使用 jQuery 将宽度设置为百分比

如何隐藏 Twitter Bootstrap 下拉菜单

!!~(不是波浪号/bang bang 波浪号)如何改变包含/包含数组方法调用的结果?

jquery分别绑定双击和单击

jquery,id内类的 Select 器

检测 jQuery UI 对话框是否打开

Bootstrap datepicker Select 后隐藏

设置 JQuery event.preventDefault() 时绕过 window.open 上的弹出窗口阻止程序

jQuery: Select 不为空的数据属性?

如何获取第一个元素而不是在 jQuery 中使用 [0]?