使用引導程序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') 
    } 
);