javascript - マウスクリック位置でポップオーバーを開く方法

Question

HTMLページに画像をロードしました。マウスのクリック位置の真上でTwitterBootstrapからポップオーバーを開きたいのですが。これまでに行ったことは、画像の横にあるポップオーバーを開くことです。しかし、私が本当にやりたいのは、画像をクリックした場所でポップオーバーを開くことです。

どうすればこれを達成できますか？

Answer 1

マウス座標を取得し、スクリプトでそれらを使用してポップオーバーをクリック時に配置する必要があります。jQueryを使用している場合、これは役立つ可能性があります。

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

- -編集 - -

これがあなたが求めているもののデモです。

Answer 2

選択した座標を使用して、.popoverクラスを上書きしてみてください

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

位置要素をリセットするだけで、メインのbootstrap.cssで他のすべてのスタイルがそのまま保持されます。