は、私はそうのような任意のコンテンツを含むdiv要素（しかし、私が思い付いたことは動作しません）にブートストラップポップオーバーを追加しようとしている特定のdiv要素

Question

にブートストラップポップオーバーを追加します。

<div id="popover-target"> 
    <h3>I need a popover</h3> 
     <p> 
     This is some content for the section 
     that needs to be explained by the popover. 
     </p> 
</div> 
<button class="btn">Show popover</button> 

<script> 
    $(function(){ 
     $('.btn').click(function(){ 
      $('#popover-target').popover({title: 'Title', content: 'Test Content', container: 'body', placement: 'right'}); 
     }); 
    }); 
</script> 

場合$('#popover-target')を$('.btn')に変更すると、ポップオーバーが正しく表示されます。何か案は？

Answer 1

ボタンクリック時に divの上にカーソルを置いた場合は、ボタンのクリック時にポップオーバーが初期化されました。

$('.btn').click(function() { 
    $('#popover-target').popover({ 
     trigger: 'hover', 
     title: 'Title', 
     content: 'Test Content', 
     placement: 'bottom' 
    }) 
    .popover('show'); 
}); 

Answer 2

$(function(){ 
 
$('.btn').popover({ 
 
     container: "body", 
 
     html: true, 
 
     content: function() { 
 
     return '<div class="popover-message">Hello</div>'; 
 
     } 
 
    }); 
 
    
 
    
 
}); 
 

 
$('.btn').click(function(){ 
 
     $('#btn').popover(); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 

 
<div id="popover-target"> 
 
    <h3>I need a popover</h3> 
 
     <p> 
 
     This is some content for the section 
 
     that needs to be explained by the popover. 
 
     </p> 
 
</div> 
 
<button class="btn">Show popover</button>