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

4906 ワード
bootstrap4 bootstrap4 テキストリンク

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")

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