84

我是 Bootstrap 的新手，无法让弹出框和工具提示功能正常工作。我对下拉菜单和模型没有任何问题，但我似乎缺少弹出框和工具提示的内容。

我正在显示工具提示，但它们的样式和位置不像引导程序示例。而且弹出窗口根本不起作用。

请看一下，让我知道我错过了什么。

       <!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>
4

8 回答 8

231

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

$(function () { $("[data-toggle='tooltip']").tooltip(); });
于 2013-08-23T20:47:54.673 回答
147

原来Evan Larsen 有最好的答案。请为他的答案投票（和/或选择它作为正确答案） - 这太棒了。

在这里工作 jsFiddle

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

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

您将看到长段落中的所有工具提示都具有仅一行的有效工具提示。

在 jsFiddle 示例（上面的链接）中，我还添加了一个工具提示（通过登录按钮）默认打开的情况。此外，工具提示代码已添加到 jQuery 中的按钮中，而不是 HTML 标记中。

弹出框的工作方式与工具提示相同：

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

你有它！终于成功了。

解决这些问题的最大问题之一是让引导程序与 jsFiddle 一起工作......这是你必须做的：

  1. 从此处获取 Twitter Bootstrap CDN 的参考：http: //www.bootstrapcdn.com/
  2. 将每个链接粘贴到记事本中并删除除 URL 之外的所有链接。例如：
    //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
  3. 在 jsFiddle 的左侧，打开 External Resources 手风琴下拉菜单
  4. 粘贴在每个 URL 中，每次粘贴后按加号
  5. 现在，打开“Frameworks & Extensions”手风琴下拉菜单，然后选择 jQuery 1.9.1（或任何...）

现在你准备好了。

于 2013-08-30T16:31:53.457 回答
27

使用 BOOTSTRAP 3：简短而简单

检查 - JS Fiddle

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(); 
});
于 2014-01-12T09:59:07.480 回答
6

我必须在 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 用户界面
  • 引导程序
于 2014-04-03T18:08:44.177 回答
5

出于某种原因，我能够让我的代码工作的唯一方法是切换几件事。如果到目前为止对您没有任何帮助，请试一试：

$('body').popover({ 
    selector: '[data-toggle="popover"]', 
    trigger: 'hover',
    placement: 'right'
});
于 2014-09-08T20:21:30.500 回答
0

您只需要启用工具提示：

$('some id or class that you add to the above a tag').popover({
    trigger: "hover" 
})
于 2013-08-23T20:16:01.467 回答
0

您的脚本中有语法错误，正如 xXPhenom22Xx 所指出的，您必须实例化工具提示。

<script type="text/javascript">

    $(document).ready(function() {

        $('.btn-danger').tooltip();

    }); //END $(document).ready()

</script>

请注意，我使用了您的课程“btn-danger”。您可以创建不同的类，或使用id="someidthatimakeup".

于 2013-08-23T20:23:08.307 回答
0

如果您使用的是 Rails 和 ActiveAdmin，这将是您的问题： https ://github.com/seyhunak/twitter-bootstrap-rails/issues/450 基本上，与 active_admin.js 冲突

这是解决方案： https ://stackoverflow.com/a/11745446/264084（Karen 的回答） tldr：将 active_admin 资产移动到“供应商”目录中。

于 2015-05-04T05:41:57.950 回答