弹出框和引导程序 3答案

【问题标题】：Popovers and bootstrap 3弹出框和引导程序 3
【发布时间】：2013-11-14 08:28:27
【问题描述】：

当用户将鼠标悬停在我页面中的某些 li 上时，我想显示一个弹出框。因此，在检查引导页面中的示例之后，这就是我所做的。脚本放置在关闭body标签之前

$("li").each(function (i){
    $(this).popover({title:"Title", content:"Content", trigger:"hover"});
});

但仍然不会显示弹出框。

我的html很简单

<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
   etc...
</ul>

虽然没有弹出窗口出现...我做错了什么？

【问题讨论】：

浏览器控制台中的任何错误

标签： jquery twitter-bootstrap popover

【解决方案1】：

脚本中有语法错误

jQuery(function ($) {
    $("li").popover({
        title: "Title",
        content: "Content",
        trigger: "hover",
        placement: 'bottom'
    }); //<-- missing  } here
});

演示：Fiddle

【讨论】：

我的代码没问题，只是在这里输入有误。谢谢。为什么这不起作用然后bootply.com/94050
@Apostolos 问题在于放置，添加如上所示的放置选项就可以了。默认情况下，弹出框显示在最右边
展示位置底部有效，但没有其他展示位置（例如“正确”）。这是为什么呢？
@Apostolos 如果你给ul 一个宽度，那么右边也可以jsfiddle.net/arunpjohny/gZrLb/2
谢谢！！现在我怎么能猜到....:(.Web 技术有时会让人感到困惑..

【解决方案2】：

我会将标题和内容放入 DOM 而不是 jQuery 脚本（关注点分离）中。这意味着在每个 li 标记中使用 HTML 5 data- 属性。例如

<li data-title="The Title" data-content="The content">One</li>

这意味着您不必在 jQuery 脚本中指定弹出框的标题和内容。

【讨论】：

我想使用弹出窗口最终呈现 html 而不仅仅是一个字符串。