3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Bootstrapのtooltipをfont-awesomeのアイコンに使いたい

Last updated at Posted at 2021-01-15

tooltip実装前の元のコード

application.html.slim
span.ul.navbar-text = link_to new_task_path, class: 'text-reset'
  = content_tag(:i, "", class: "far fa-file fa-lg")

font-awesomeのアイコンをクリックすると新規作成画面に移動する。が、何の説明もなしじゃこのアイコンが何を意味するか分からないのでBootstrapによるtooltip実装を試みた。

ツールチップ~Bootstrap4移行ガイド

<p><a href="#" data-toggle="tooltip" title="これがツールチップです">リンク</a>の上にカーソルを合わせるかタッチして下さい。</p>

試行錯誤

data-toggleとtitleを設定すればいいだけかと思いまず書いたコード

application.html.slim
span.ul.navbar-text = link_to new_task_path, class: 'text-reset'
  = content_tag(:i, "", class: "far fa-file fa-lg", data-toggle="tooltip", title="新規作成")

結果はエラー。原因はaを作るlink_toではなくiを作ってるcontent_tagの中に書いたからだと思う。

application.html.slim
span.ul.navbar-text = link_to new_task_path, class: 'text-reset', data-toggle="tooltip", title="新規作成"
  = content_tag(:i, "", class: "far fa-file fa-lg")

これでいけるかと思いきやこっちもダメ。

解決法

HTML5 - Rails,link_toメソッドの|teratail
上の記事を見ると、data-toggleをシングルクォーテーションで囲っている。

最終的なコード

application.html.slim
span.ul.navbar-text = link_to new_task_path, class: 'text-reset', 'data-toggle': "tooltip", 'title': "新規作成"
  = content_tag(:i, "", class: "far fa-file fa-lg")
スクリーンショット 2020-03-20 21.50.12.png

無事、アイコンが何を意味するのかをtooltipによって説明出来ました。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?