Question

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

如何在popover的这个内容字段中调用css类的bootstrap。

Answer 1

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

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
});

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

<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>

如果使用自定义模板，请不要尝试直接在模板中添加标题或内容，只会将其覆盖在选项中的内容和标题或数据内容/标题属性中。标记。如果您不提供任何内容值，则弹出窗口将失败。

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

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

1 个答案:

DEMO