Question

当用户将鼠标悬停在我的页面中的某些li上时，我想显示一个弹出窗口。所以在检查bootstrap页面中的示例之后这就是我所做的。该脚本放在关闭正文标记

之前

$("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>

虽然没有突然出现......我做错了什么？

Answer 1

脚本中存在语法错误

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

演示：Fiddle

Answer 2

我会将标题和内容放入DOM而不是jQuery脚本（Separation of Concerns）。这意味着在每个li标记中使用HTML 5 data-属性。 E.g

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

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

弹出装置和自举3

2 个答案: