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

2020年6月11日Bootstrap

困ったこと

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

ツールチップとは?

カーソルを合わせると表示するポップアップのこと。Bootstrap4の公式サイトはこちら

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

<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>

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

めでたしめでたし

エンジニアの年収を上げる方法

フリーランスエンジニアで年収を大幅アップしませんか?
実際に僕は会社員からフリーランスエンジニアになって年収が87万円アップしました

今なら相談(ヒアリング)するだけで3,000円分のamazonギフト券がもらえます!
初めての案件契約で最大10万円分の準備金がもらえます
非公開の高単価案件(100万円超え)が多数あります

詳しくはこちら