单独使用的html标签,javascript – 如何使Bootstrap popover在单独的元素中使用HTML内容...

您想要在弹出窗口中显示的任何文本/ HTML都可以添加到具有display：none;的DIV中.它的CSS属性.

您可以将函数传递给popover选项的content属性,该属性从隐藏的DIV获取内容.这样就不需要通过ID引用并插入脚本标记.

HTML：

Panel title 1

Panel content 1

Here is some hidden content 1

Panel title 2

Panel content 2

Here is some hidden content 2

Panel title 3

Panel content 3

Here is some hidden content 3

CSS：

.my-popover-content {

display:none;

}

使用Javascript：

$(document).ready(function () {

popoverOptions = {

content: function () {

// Get the content from the hidden sibling.

return $(this).siblings('.my-popover-content').html();

},

trigger: 'hover',

animation: false,

placement: 'bottom',

html: true

};

$('.panel-heading').popover(popoverOptions);

});