Bootstrap 3.0 Popover和工具提示

84

我是Bootstrap的新手，无法正常使用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="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>
javascript  jquery  css  twitter-bootstrap 
— 用户名
source
几分钟前我刚刚发布了相同的问题，还将BS3与其他功能（如“模态”和“选项卡”）一起使用，但没有工具提示或弹出式窗口……如果我发现某些内容，它将更新您。
— xXPhenom22Xx
对于弹出式窗口，选项未定义
— Cyber​​maxs 2013年
现在，我只是试图获得默认行为，但我有兴趣使它显示在悬停而不是点击的位置，但这是下一个。我还需要在选项中添加一些内容吗？
— user2560895
上面的代码是我当前正在使用的代码，但仍然无法正常工作。有什么建议么？我的东西顺序错误吗？
— user2560895

Answers:

147

事实证明，埃文·拉森（Evan Larsen）是最好的答案。请增加他的答案（和/或选择它作为正确答案）-非常好。

在这里工作jsFiddle

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

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

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

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

Popovers做的工作一样的工具提示：

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

在那里，您拥有了！终于成功了。

解决这些问题的最大问题之一是使bootstrap与jsFiddle一起使用...这是您必须做的：

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

现在，您准备好出发了。

— 茜草属
source
在jsFiddle中，为什么触发器没有用单引号引起来，而放置在位置呢？
— HPWD
没有充分的理由，我只是错过了。但这似乎有效。也许单字键不需要引号-有时他们并不需要-不过，我通常把他们英寸
— cssyphus
这对我来说听起来很合逻辑。感谢您的澄清。
— HPWD
4
对我来说听起来像胡言乱语。哈！只是不得不说;）
— 埃文·拉森
您可以相对于特定容器使用该方法吗？实例化特定容器中的所有工具提示或弹出窗口？
— Michael Ecklund 2014年
231

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

$(function () { $("[data-toggle='tooltip']").tooltip(); });
— 埃文·拉森（Evan Larsen）
source
4
谢谢，在我给出的所有答案中，我不得不说我可能花了最少的时间在此上。但无论如何，它却获得了最高分。
— 伊万·拉尔森
但是问题是。对我来说，它不适用于chrome。然后我结束了做一些事情jsfiddle.net/arunpjohny/4HptX/4这个职位stackoverflow.com/questions/18372632/...
— 美龄萨拉赫丁
@Md Salahuddin，一旦更新了jquery，它现在就可以工作了吗？您在问一个问题还是那句话？
— 埃文·拉森
1
这只是一个声明。我改用jsfiddle.net/arunpjohny/4HptX/4，因为这段代码不适用于chrome。
— 萨拉赫丁（Mal。Salahuddin）2014年
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>

Java脚本

$(function () { 
    $("[data-toggle='tooltip']").tooltip(); 
});
— 阿比舍克·戈尔（Abhishek Goel）
source
如果您要为异步加载的数据（ajax，角度等）具有弹出功能，则此方法将不起作用，但以下答案将适用。
— 阿德里安·赫德利
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 UI
  • 引导程序
— 乔纳森
source
1
我有一个类似的问题，在引导后加载jquery ui，您的回答使我意识到了这个问题。
— hubson bropa 2014年
检查此为酥料饼，1触发的Popovers，2.通过数据Popovers的定位属性
— shaijut
5

由于某种原因，我能够使代码正常工作的唯一方法是切换几件事情。如果到目前为止没有任何效果，请旋转一下：

$('body').popover({ 
    selector: '[data-toggle="popover"]', 
    trigger: 'hover',
    placement: 'right'
});
— 圣塔
source
1
这是唯一对我有用的东西，因为popover元素可能一开始并不在眼前。谢谢！
— J. Titus
0

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

<script type="text/javascript">

    $(document).ready(function() {

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

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

</script>

请注意，我使用了“ btn-danger”类。您可以创建其他类，也可以使用id="someidthatimakeup"。

— 茜草属
source
好的，我认为代码已更改，以符合您的建议。它仍然无法正常工作。我还不知道Javascript，所以这有点棘手。我只是在尝试获取它们必须以相同方式工作的示例。
— 2013年
弹出窗口一有点困难，但是我得到了上面的工具提示。
— cssyphus
0

您只需要启用工具提示：

$('some id or class that you add to the above a tag').popover({
    trigger: "hover" 
})
— xXPhenom22Xx
source
不，当您将鼠标悬停在弹出窗口上时，它只会显示弹出窗口本身，而不会显示工具提示。
— CpnCrunch 2015年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.