![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqigDUEdcA91UjdznYpVufBZ77wPafwkeKTVZWjAO51K3I4G2Wuj-1JuFNVWn2LuoP35gbu0ugzLbNWPYrqWxy4VshQNxNcCJK1GA6JCPmqisJ-2tCRFJ81v52rn-1BfLqiD501TBdIeCl/s320/Fotolia_121084901_XS.jpg)
オフィス狛 技術部です。
Webシステムなどで、ツールチップ(吹き出し)を使用する為の「tooltipster」という jQuery プラグインはご存知でしょうか?
弊社でも良く使わせて頂いているのですが、ある限定的なシチュエーションで期待した動作をしなかったので、現象と対応方法を記事にしたいと思います。
・前提条件
今回の現象は、以下の時に発生します。Bootstrap の Modal ダイアログ(スクロール有り)で tooltipster 使った場合
Bootstrap Modal
Tooltipster - The jQuery Tooltip Plugin -
・発生した現象
スクロールしても、tooltipster で表示したツールチップ(吹き出し)が画面に固定され、スクロールに追従しない。スクロール前の吹き出し
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLC8VCe9rfXq9Jc_ms2LREKafs0a1WRtvIq4K8pcx0Sam-ifQ_7fMH7djPSASBkQeP_zYIakjR-AdcGLOhVIsFfIfT0r_XT7eoVyqQxqqhGaACQB0xK3uf9ImYwemTcBoa69OUdCqasWEA/s320/%25E5%2588%259D%25E6%259C%259F%25E8%25A1%25A8%25E7%25A4%25BA.png)
スクロール後の吹き出し
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI1Sho8fXg-maz1Cc6T60P52iwxve6KM6TKUrJfQlaKtOQPlwvt1P07o7Hal4RICI_d6NuwXdzrMZ7GK1uw_o7NAKYBTrGMVl-ezyWedzwxm8UbsdiR9K5g7dXcaB0VhDnUGL0KIkcMXn2/s320/%25E4%25BF%25AE%25E6%25AD%25A3%25E5%2589%258D.png)
スクロールしても、吹き出してが画面上の元の位置に固定されている。
・対応方法
こういった場合、モーダルをスクロールする毎に'reposition'してあげる必要があります。$('モーダルのIDなど').on('scroll', function(){ $(this).find('.tooltipster').tooltipster('reposition'); });
上記記載を追加することで、モーダルをスクロールした場合でも、
tooltipsterで表示した要素も一緒にスクロールされてくれます。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXReplDEUeSKI_HNOjARr3PanmHNUNtcIOdsWZ8vTH4rV7c6GbV83YS_6F8l58gp2VlHH7zZaLZVFTil9gdAni1ASlH5crN4rKV6rnu-CJ752vyRosx6UhZJaoOngQhRh2xqq_Purvt5EL/s320/%25E4%25BF%25AE%25E6%25AD%25A3%25E5%25BE%258C.png)
ちょっとした小技ですが、案外ハマってしまう部分なので、今回記事にしました。
Bootstrap , jQuery
Thanks for the info sharing in Japanese language. https://www.technologist360.com/
返信削除