使用引导程序3弹出框在文本上悬停时显示多个弹出框

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的popovers然后用下面的代码

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