Bootstrap 每个元素的 4 种不同的弹出框和工具提示样式

Question

我想为 Bootstrap 4 上每个部分的工具提示和弹出框元素赋予不同的样式例如：

此元素的颜色和其他 css 选项：

<div class="first-type">
    <div data-toggle="popover" data-trigger="hover" title="About Us" data-placement="left">
        <a href="#about" class="item-class"></a>
    </div>
</div>

还有这个元素的另一个 CSS 选项：

<div class="second-type">
    <div data-toggle="popover" data-trigger="hover" title="Services" data-placement="left">
        <a href="#services" class="item-class"></a>
    </div>
</div>

Bootstrap 3x 将弹出框代码添加到元素中。而且我可以使用元素的类轻松地给出样式。但是 Bootstrap 4 将弹出代码添加到正文中。我该如何解决这个问题？

Answer 1

通过js：

$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        trigger: 'click',
        template: '<div class="popover awesome-popover-class"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'
    });  
});