Rails5でbootstrap tooltipを動的に使う

rails tooltip

リンクにちょっとしたツールチップもあったら、ユーザビリティが上がりますね!さらにrailsなら動的にデータが変わった場合、ツールチップの表示内容も変わります。今回はbootstrap tooltipを使って簡単に実装してみたいと思います。これはhover時に動作するものですが、クリック時に動かしたいならpopoversというものもあります。
また、ダミーのデータはFakerというライブラリを使って投入します。

bootstrap-tooltip-rails
https://github.com/brandonhilkert/bootstrap-tooltip-rails
Documentation
https://getbootstrap.com/docs/4.1/components/tooltips/
Faker
https://github.com/stympy/faker

環境はこちらです

準備

準備としてScaffoldでユーザーと、ダミーデータを入れるカラムも生成します。カラム名は適当に変えてください。

Gemfile

bundle install します

assets/javascripts/application.js

assets/stylesheets/application.scss

fakerでダミーデータ作成

Userテーブルに20件のnameとbookのダミーデータを作成する内容のファイルをseed.rbに書きます。

db/seed.rb

次のコマンドでseedデータが入ります。

コンソールで入っているのが確認できました。

jQuery

オプションのplacementはtop,bottom,right,leftでツールチップのでる向きが変わります。
その他のオプションはこちら

Views

title属性にRubyコードを入れます。

これで動きました!
ご覧いただき、ありがとうございました!😆


投稿者:

Shuji Tenra

「仕事に特化したQ&AサイトJobQuery【ジョブクエリ】」の開発/運営をしています。https://jobquery.jp