リンクにちょっとしたツールチップもあったら、ユーザビリティが上がりますね！さらに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
環境はこちらです
|
1 2 3 4 |
ruby 2.4.0 rails 5.1.6 bootstrap-tooltip-rails 0.1 faker 1.9.1 |
準備
準備としてScaffoldでユーザーと、ダミーデータを入れるカラムも生成します。カラム名は適当に変えてください。
|
1 2 |
$ rails g scaffold User name:string book:string $ rails db:migrate |
Gemfile
|
1 2 3 |
gem 'bootstrap-tooltip-rails' gem 'faker' #ダミーデータを入れるライブラリです gem 'jquery-rails' #rails5はこれを入れないとjQueryが動きません |
bundle install します
assets/javascripts/application.js
|
1 2 |
//= require bootstrap/bootstrap-tooltip //= require jquery #rails5はこれを入れないとjQueryが動きません |
assets/stylesheets/application.scss
|
1 |
*= require bootstrap/bootstrap-tooltip |
fakerでダミーデータ作成
Userテーブルに２０件のnameとbookのダミーデータを作成する内容のファイルをseed.rbに書きます。
db/seed.rb
|
1 2 3 4 5 6 |
20.times do User.create( name: Faker::Name.name, book: Faker::Book.title ) end |
次のコマンドでseedデータが入ります。
|
1 |
$ rails db:seed |
コンソールで入っているのが確認できました。
|
1 2 3 4 5 6 7 |
$ rails c Running via Spring preloader in process 7991 Loading development environment (Rails 5.1.6) 2.4.0 :001 > User.all User Load (1.5ms) SELECT "users".* FROM "users" LIMIT ? [["LIMIT", 11]] => #<ActiveRecord::Relation [#<User id: 1, name: "Shandi Considine", book: "Death Be Not Proud", created_at: "2018-07-27 05:15:21", updated_at: "2018-07-27 05:15:21">, #<User id: 2, name: "Adan Smith", book: "To Say Nothing of the Dog", created_at: "2018-07-27 05:15:21", updated_at: "2018-07-27 05:15:21">, #<User id: 3, name: "Miss Blair Greenfelder", book: "Death Be Not Proud", created_at: "2018-07-27 05:15:21", updated_at: "2018-07-27 05:15:21">, #<User id: 4, name: "Caitlin Kertzmann", book: "Specimen Days", created_at: "2018-07-27 05:15:21", updated_at: "2018-07-27 05:15:21">, #<User id: 5, name: "Robbi Armstrong IV", book: "In Dubious Battle", created_at: "2018-07-27 05:15:21", updated_at: "2018-07-27 05:15:21">, #<User id: 6, name: "Nidia Borer", book: "Now Sleeps the Crimson Petal", created_at: "2018-07-27 05:15:21", updated_at: "2018-07-27 05:15:21">, #<User id: 7, name: "Ms. Tony Wolf", book: "The Last Enemy", created_at: "2018-07-27 05:15:21", updated_at: "2018-07-27 05:15:21">, #<User id: 8, name: "Johnny Bednar", book: "Down to a Sunless Sea", created_at: "2018-07-27 05:15:21", updated_at: "2018-07-27 05:15:21">, #<User id: 9, name: "Jess Leffler", book: "Wildfire at Midnight", created_at: "2018-07-27 05:15:21", updated_at: "2018-07-27 05:15:21">, #<User id: 10, name: "Issac Botsford", book: "Mr Standfast", created_at: "2018-07-27 05:15:21", updated_at: "2018-07-27 05:15:21">, ...]> 2.4.0 :002 > |
jQuery
オプションのplacementはtop,bottom,right,leftでツールチップのでる向きが変わります。
その他のオプションはこちら
|
1 2 3 4 5 |
$(function(){ $(".user_tooltip").tooltip({ placement : 'top' }); }) |
Views
title属性にRubyコードを入れます。
|
1 2 3 4 5 |
<% @users.each do |user| %> <span class="user_tooltip" data-toggle="tooltip" title="<%= user.book %>"> <%= link_to user.name , user %> </span> <% end %> |
これで動きました！
ご覧いただき、ありがとうございました！😆
