Question

I have a popover like this; when the user hovers on first image he sees second image on popover.

<img src="myimage.jpg" rel="mypop" data-content="&lt;img src=&quot; otherimage.jpg &quot;&gt;">

I use this in script tags

$("[rel=mypop]").popover({ placement:'right', html : true });

Everything is ok image is in the middle of page.
But if the user hovers to an image in upper or downer side of page, he can’t see proper image.

To solve this issue I suppose I must use CSS.

<style type="text/css">
    img[rel="mypop"] {
    }
</style>

But I couldn’t find what to write into CSS style to show user popover in proper place.

I want user to see popover without conflicting any parts of page.

Answer 1

I used Twitter Bootstrap popover for this.
But I found out that, using popover (for showing images) is not suitable.
So now I use Colorbox to show that kind of data.