More than 3 years have passed since last update.

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

Posted at 2020-11-16

はじめに

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

MacOS 10.15.7
ruby 2.6.5
Ruby on Rails 6.0.0
jquery 3.4.1

今回は、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について実際に吹き出しに表示させたい文字列を明記します。

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