I have loaded an image on my HTML page and I'd like to open a popover from Twitter Bootstrap right over the mouse click position. What I have done so far is to open the popover on the side of the image. But what I really want to do is to open the popover wherever I've clicked on the image.

How can I achieve this?

I have loaded an image on my HTML page and I'd like to open a popover from Twitter Bootstrap right over the mouse click position. What I have done so far is to open the popover on the side of the image. But what I really want to do is to open the popover wherever I've clicked on the image.

How can I achieve this?

• javascript
• html
• css
• twitter-bootstrap
• popover

• What have you tried so far? any sample code will help others answer your problem. – shabeer90 Commented Feb 20, 2013 at 14:28

2 Answers 2

You need to get the mouse coordinates and make your script use them to position the popover on click. If you're using jQuery this might help:

$('#yourimage').click(function(){
      $('#popover').css('left', pageX-(popover width)+'px');
      $('#popover').css('top', pageY-(popover height)+'px');
})

---EDIT---

Here's a demo of what you're after.

Try over writing the .popover class by using the co-ordinates of your choice

.popover {
top: 20px !important;/*put your position */
left: 20px !important;/*put your position*/
}

Just resetting the position elements will keep all other styles intact in the main bootstrap.css.