Help us understand the problem. What is going on with this article?

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

はじめに

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

完成イメージ

tooltip2.gif

環境

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/

tomato1125
プログラミング未経験からの転職活動をしております。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away