CODEWITHSUNDEEP
twitter-bootstrap
Bujji
Bujji

Reputation: 1727

Bootstrap popover right side alignment

I am trying to use bootstrap popover as some like facebooks new friends , new messages and new activity popover windows . But in my case I have to right align the popover . If I right align my content is not automatically fitting and some part of the message is hiding at the top .

You can see the below JS fiddle

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">

Any suggestion to resolve this issue ? ( or any other ways to implement new message popup box like facebook )

I am looking for some thing like below ..

enter image description here

Upvotes: 1

Views: 4536

Answers (3)

codedme
codedme

Reputation: 615

You need to overwrite some bootstrap styles in order to achieve this :

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

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

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

Check this fiddle:

http://jsfiddle.net/CB8pr/

Upvotes: 1

Jonnny
Jonnny

Reputation: 5039

<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">

Upvotes: 0

user2478121
user2478121

Reputation:

You should increase the margin-top = 50px approx of your given image.

Upvotes: 0

Related Questions