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

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>

ツールチップが綺麗に画像下に表示されるようになり、いかがわしいサイトだと疑われることもなくりました
めでたしめでたし
ディスカッション
コメント一覧
まだ、コメントがありません
よくLoadingされてるDocs
新たにPostされたDocs
: ウェブサービス
メルカリやラクマの商品がいつ出品されたのかを調べる裏技
メルカリやラクマなどで商品を探してると、ときどき、 「この商品はいつ出品されたも ...: 仕事環境
15年前のエアコンに洗浄スプレーしたら想像以上にキレイになった
うちのエアコンは新品で購入してからすでに15年が経過しています にもかかわらず、 ...: Laravel
一定時間で消えるフラッシュメッセージを簡単に実装[Laravel8]
以前、手軽にフラッシュメッセージが実装できるnotieを紹介しました 今回は、そ ...: Laravel
ランダムな文字列やユニークなIDをLaravelで生成
random use Illuminate\Support\Str; // 引数 ...: スマホ
4,837円あげるって言うからOCNモバイルOneにLinksmateから乗り換えたんですよ
これまでは僕はスマホの通信会社に、MVNOのLinksmateを使ってきました ...HashMap
created_by
はやぴ
Web/アプリ開発エンジニア
Sierにてお堅いB向けのソフトウェア開発を経て、現在はC向けのWebやアプリを中心に開発しています。
Utilities