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

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してる記事
新たにPostされた記事
: JS
Dropzone.jsで編集画面を作る(アップロード済みの画像を表示)
前回からの続きです Dropzone.jsを使って画像アップロードの編集画面を作 ...: Laravel
LaravelでDBテーブルをupdateした時に、同時に更新した値を取得する裏技[Laravel8]
通常Eloquentのsaveやupdateでは、実行時に更新した値の結果を返し ...: JS
忘れがちなJqueryのあれやこれ
Jqueryって何でこんなに忘れやすいのでしょうか 呪文にかかったくらい覚えられ ...: 資格
理系エンジニアの僕がTOEICで800点をとるためにした勉強
先日、TOEIC L&R テストで800点を超えました 今回は理系エンジ ...: Laravel
[Laravel8]npm run devが失敗する場合の解決法
Laravel8にJetstreamをインストールする際、npm run dev ...HashMap
Created by
はやぴ
Web/アプリ開発エンジニア
Sierにてお堅いB向けのソフトウェア開発を経て、現在はC向けのWebやアプリを中心に開発しています。
そのほか