html - 为每个元素引导 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>'
    });  
});