2016-10-31 3 views
1

Bootstrapを使用して、指定したdivの隣にポップオーバーを作成します。ブートストラップのポップオーバーを別のdivの隣に表示させるには?

ブートストラップdocumentationは、この目的でデータコンテナhtml属性を使用することを提案しています。次のようなものがあります:data-container = "my-div"

だから私は最初、私はポップオーバーが隣に表示する、DIVを定義:データ・コンテナはdiv要素のhello IDを指して、

<div id="hello"> 
    I'd like for the popover to show next to this. 
</div> 

そしてポップオーバートリガーボタン:

<a href="#" id="example" class="btn btn-primary" rel="popover" 
    data-content="This is the body of Popover" 
    data-original-title="Creativity Tuts" data-container="#hello">pop 
</a> 

しかし、私はそれを動作させることはできません。ポップオーバーはボタンの横に表示され続けます。

ここにはfiddleがあります。

答えて

1
は、あなたがそのボタンから popoverをトリガすることが選択肢となるだろう

などを「左」が、 #hello要素内にpopoverの内容がありますか?

Demo

HTML:

<p>Click on button to see Popover</p> 
<a href="#" id="example" class="btn btn-primary">pop 
</a> 
<br/><br/> 
<br/><br/> 
<div id="hello" data-content="This is the body of Popover" 
    data-original-title="Creativity Tuts" rel="popover"> 
    I'd like for the popover to show next to this. 
</div> 

Javascriptを:

$(function() { 
    $('#example').click(function() { 
     $('#hello').popover('show'); 
    }); 
}); 

CSS:

#hello { 
float:left; 
} 
-1

デフォルトでは、要素の右側にポップオーバーが表示されます。あなたはおそらく、「トップ」のようなもので、「場所」を置き換えて、あなたの<a>data-placement="place"を入れたいとしている、

関連する問題