画像上に表示するツールチップを被らせないやり方

2020年2月1日2020年6月11日Bootstrap

困ったこと

Bootstrap4のツールチップ（Tooltips）を画像上で表示していたんですが、そうするとツールチップ自体が画像にかぶってしまう現象が発生しました

ちなみに、ツールチップの表示方向は下に設定してます

<a data-toggle='tooltip' data-placement='bottom' title='マーチ'>
    <img src='march.jpg'/>
</a>

カーソルが画像上にオーバーラップした時だけポップアップするので、別にツールチップが画像にかぶること自体はどうでもよかったんです

問題は画像の下半分にカーソルを合わせると、ツールチップの表示/非表示が高速で行われて、忙しないことこの上ないのです

見方によってはバグ、もしくは何か裏でよくない処理が動いてるんじゃないかという疑惑が持たれそう

それと、この画像自体にはリンクが貼ってあってクリックすると別サイトに飛ぶ仕掛けになっています

でも画像の下半分にカーソルを合わせている状態ではクリックができない状態になってしまいます

これはまずい

ユーザが画像の上半分をいつもクリックしてくれるとは限らないからでせう

解決方法

画像に設定しているAタグに「d-inline-block」を追加

<a data-toggle='tooltip' data-placement='bottom' title='マーチ' class='d-inline-block'>
    <img src='march.jpg'/>
</a>

ツールチップが綺麗に画像下に表示されるようになり、いかがわしいサイトだと疑われることもなくりました

めでたしめでたし