소개

이번은, 아이콘에 마우스 오버했을 때에, 말풍선이 표시시키는 구현을 실시합니다.

완성 이미지

환경

MacOS 10.15.7
루비 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 한국어 참조
htps : // 게이 t보오 tst et al p. jp / 두 cs / 4.3 / 코 m 포넨 ts / 및 치 ps /