狛ログ

2018年2月19日月曜日

Bootstrap の Modal ダイアログ(スクロール有り)で tooltipster 使った場合に、表示が固定されしまう現象の対応方法


オフィス狛 技術部です。

Webシステムなどで、ツールチップ(吹き出し)を使用する為の「tooltipster」という jQuery プラグインはご存知でしょうか?
弊社でも良く使わせて頂いているのですが、ある限定的なシチュエーションで期待した動作をしなかったので、現象と対応方法を記事にしたいと思います。

・前提条件

今回の現象は、以下の時に発生します。
Bootstrap の Modal ダイアログ(スクロール有り)で tooltipster 使った場合

Bootstrap Modal
Tooltipster - The jQuery Tooltip Plugin -

・発生した現象

スクロールしても、tooltipster で表示したツールチップ(吹き出し)が画面に固定され、スクロールに追従しない。

スクロール前の吹き出し
スクロール後の吹き出し

スクロールしても、吹き出してが画面上の元の位置に固定されている。

・対応方法

こういった場合、モーダルをスクロールする毎に'reposition'してあげる必要があります。
$('モーダルのIDなど').on('scroll', function(){
    $(this).find('.tooltipster').tooltipster('reposition');
});

上記記載を追加することで、モーダルをスクロールした場合でも、
tooltipsterで表示した要素も一緒にスクロールされてくれます。

ちょっとした小技ですが、案外ハマってしまう部分なので、今回記事にしました。


,

1 件のコメント: