オフィス狛 技術部です。
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で表示した要素も一緒にスクロールされてくれます。
ちょっとした小技ですが、案外ハマってしまう部分なので、今回記事にしました。
Bootstrap , jQuery
Thanks for the info sharing in Japanese language. https://www.technologist360.com/
返信削除