jquery - 弹出框和引导程序 3

Question

当用户将鼠标悬停在我页面中的某些 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>

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

Answer 1

脚本中有语法错误

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

演示：小提琴

Answer 2

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

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

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