アイコンをマウスオーバーした際に吹き出しを表示させる

2802 ワード
マウスオーバー Bootstrap tooltip Bootstrap テキストリンク

はじめに

今回は、アイコンにマウスオーバーした際に、吹き出しが表示させる実装を行います。

完成イメージ

環境

MacOS 10.15.7
ruby 2.6.5
Ruby on Rails 6.0.0
jquery 3.4.1

前提条件

  • bootstrapが導入済みである。
  • font-awesomeが導入済みである。

作業していきましょう！

今回は、bootstrapのtooltipの機能を使って実装します。

html.erb

○○○.html.erb
<i class="fas fa-bell headerBellIcon", data-toggle="tooltip", data-placement="top", title="お知らせ">

tooltipを使う場合は

data-toggle="tooltip", data-placement="top", title="文字列"

を追加します。

jsファイル

○○○.js
$(function() {
  $('[data-toggle="tooltip"]').tooltip()
})

補足

html.erbのdata-placement=は要素に対してどの位置に吹き出しを表示させるのかを指定します。
data-placement= 'top'の場合だと、要素に対して上部に吹き出しが現れるようになります。

なお、
'right' ・・・　要素の右側に表示
'left' ・・・　要素の左側に表示
'bottom' ・・・　要素の下部に表示
となります。

titleについて実際に吹き出しに表示させたい文字列を明記します。

参考

今回の内容は、↓のリンクに全て書かれております。他にもオプションなどが用意されておりますので、一度見ていただければと思います。

Tooltip bootstrap 4.3 日本語リファレンス
https://getbootstrap.jp/docs/4.3/components/tooltips/