1. ホーム
  2. javascript

[解決済み] bootstrap のポップオーバーがすべての要素の上に表示されない

2022-07-08 16:37:34

質問

bootstrapのサイトで作業しています。2.0からbootstrap 2.2にアップデートした後、ポップオーバー以外はすべてうまくいきました。

ポップオーバーはまだうまく表示されますが、他のすべての要素の上に表示されません。

<div> // this sits on top of the popover. this did not happen before cleaning up scripts.
     <div>  //popover shows on top of this
          <div> //popover shows on top of this
               //link here with popover in it.
          </div>
     </div>
</div>

どなたか、ポップオーバーの動作が変わった理由や、修正方法についてお分かりになる方はいらっしゃいませんか?ありがとうございます。

どのように解決するのですか?

私は、この問題を解決するために data-container="body" をhtml要素に設定することで解決しました。

HTML の例です。

<a href="#" data-toggle="tooltip" data-container="body" title="first tooltip">
    hover over me
</a>

JavaScript の例です。

$('your element').tooltip({ container: 'body' }) 

このリンクから発見。 https://github.com/twitter/bootstrap/issues/5889