Bootstrap popover правая сторона выравнивания

Question

Я пытаюсь использовать bootstrap popover как некоторые как facebook новых друзей, новых сообщений и новых действий popover windows. Но в моем случае я должен правильно выровнять popover. Если я правильно выравниваю, мой контент не будет автоматически подгоняться, а часть сообщения скрывается вверху.

Вы можете увидеть ниже JS скрипку

http://jsfiddle.net/kXLv5/18/

$(function(){ 
       $("#example").popover({placement:'right',content:'<ul> <li> Friend list 1 </li> <li> Friend list 2 </li> <li> Friend list 3 </li> <li> Friend list 4 </li> <li> Friend list 5 </li><li> Friend list 5 </li><li> Friend list 6 </li><li> Friend list 7 </li></ul>', html:true}); 
    $("#example").popover("show"); 
       }); 

<img id='example' style="opacity:0.4;filter:alpha(opacity=40);margin-top:20px;" alt="Friends" 
width="40px" height="40px" 
src="http://www.experienceworks.org/images/content/pagebuilder/twitter-bird-light-bgs_12-4-12.png" title="Friends"> 

Любое предложение, чтобы решить эту проблему? (Или любые другие способы реализации нового сообщения всплывающее окно, как Facebook)

Я ищу некоторые вещи, как показано ниже ..

Answer 1

Вы должны переписать некоторые стили начальной загрузки для того, чтобы достичь этого:

#friend-list .arrow{ 
top:0; 
margin-top:14px; 
} 

#friend-list .popover{ 
top:0 !important; 
margin-top:10px; 
} 

<div id='friend-list'> 
<img id=.... 
</div> 

Проверить эту скрипку:

http://jsfiddle.net/CB8pr/

Answer 2

Вы должны увеличить запас-топ = 50px Прибл из ваших дал образ.

Answer 3

<img id='example' style="opacity:0.4;filter:alpha(opacity=40);margin-top:100px;" alt="Friends" 
width="40px" height="40px" 
src="http://www.experienceworks.org/images/content/pagebuilder/twitter-bird-light-bgs_12-4-12.png" title="Friends">