How to open a popover at the click of a mouse

I uploaded the image to my HTML page and I would like to open a popover from Twitter Bootstrap right above the mouse position. What I have done so far is to open a popover on the image side. But I really want to open a popover wherever I clicked on an image.

How can i achieve this?

+5
source share
2 answers

You need to get the coordinates of the mouse and use their script to put the popover on click. If you are using jQuery this may help:

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

--- --- EDIT

Here is a demo of what you need.

+17
source

Try writing a .popover class using your chosen codes

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

, bootstrap.css.

-3

All Articles