我们如何从javascript调用一个引导类并设计自己的popover内容字段？

我们如何在popover的这个内容字段中调用引导的css类。

以下是添加HTML内容的基本格式：

$(function () {
    $('[data-toggle="popover"]').popover({ 
           trigger: 'click',
           'placement': 'bottom', 
           html: true, content:" " 
    });
});

var title='哦，你好…'；
var htmlcontent='这里是一些自定义的HTML内容。
；
$（'[data toggle=“popover”]'）。popover({
触发器：“焦点”，
标题:标题,，
内容：htmlcontent，
位置：'底部'，
html：对
});

您还可以自定义popover模板，但该模板必须具有以下基本元素：

var title = 'Oh, hello there...';
var htmlcontent = '<p>Here is some custom <strong>HTML</strong> content.</p>';

$('[data-toggle="popover"]').popover({
    trigger: 'focus',
    title: title,
    content: htmlcontent,
    placement: 'bottom',
    html: true
});

如果使用自定义模板，不要尝试直接在模板中添加标题或内容，它将被选项中设置为内容和标题的内容或标记中的数据内容/标题属性所覆盖。如果不提供任何内容值，则popover将失败

演示展示了使用标准模板插入自定义html内容以及使用自定义模板的示例

---

您可以通过

addClass（）

或

toggleClass（）

向按钮/操作添加单击、悬停（鼠标事件）并应用类。您还可以使用诸如Chrome dev tools（f12）或firebug之类的检查器来检查应用于引导popover的类，并根据需要进行修改。您可以演示如何在上述javascript内容中调用任何虚拟类的语法吗。

<div class="popover" role="tooltip"> <!--Outermost wrapper element with .popover class -->
  <div class="arrow"></div> <!--Creates the arrow -->
  <h3 class="popover-title"></h3> <!--Title is injected here (this is optional) -->
  <div class="popover-content"></div> <!--Content is injected here (not optional)-->
</div>