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将popover代码添加到body。我怎么解决这个问题？

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

Bootstrap 4不同的popover＆amp;每个元素的工具提示样式

1 个答案: