Question

我希望在悬停在文本上时一次显示多个弹出窗口，如下面的共享link。我做了以下方式，但没有运气。

<div class="row">
    <div class="col-md-12"><br/></div>
    <div class="col-md-3">
        <h4 class="text-center usecap-border" data-toggle="popover" data-content="And here's some amazing content. It's very engaging. Right?">java</h4>
    </div>
    <div class="col-md-3" >
        <h4 class="text-center usecap-border" data-toggle="popover" data-content="And here's some amazing content. It's very engaging. Right?">javascript</h4>
    </div>
    <div class="col-md-3">
        <h4 class="text-center usecap-border" data-toggle="popover" data-content="And here's some amazing content. It's very engaging. Right?">nodejs</h4>
    </div>
    <div class="col-md-3">
        <h4 class="text-center usecap-border"  data-toggle="popover" data-content="And here's some amazing content. It's very engaging. Right?">php</h4>
    </div>
</div>

JS代码：

$( "[data-toggle='popover']" ).popover( {placement: 'bottom', container: 'body', html: 'true', trigger: 'hover'} );

Answer 1

您提供的代码将初始化但不会显示弹出窗口。

$( "[data-toggle='popover']" ).popover({
    placement: 'bottom',
    container: 'body', 
    html: 'true', 
    trigger: 'hover' 
}); // This code will initialize the popover functionality

要同时显示所有元素的弹出窗口，您应该使用以下代码

$( "[data-toggle='popover']" ).popover('show')

要在hover上显示弹出窗口，请使用以下代码

$( "[data-toggle='popover']" ).hover(
    function() {
        $( "[data-toggle='popover']" ).popover('show');
    }, function() {
        $( "[data-toggle='popover']" ).popover('hide')
    }
);

使用Bootstrap 3 popover在文本上悬停时显示多个弹出窗口

1 个答案: