Tag Archives: CSS

Rails: The Code to show Tooltip


This is the story I tried to show tool tip in Ruby On Rails.

It’s simple. Show help message when it is clicked, and hide message when it is clicked again. はてなマークがクリックされたらツールチップを表示・非表示するということです。

I used javascript (jQuery) and CSS. And I created useful method in helper as follows.

Environment

  • Ruby 1.8.7p374
  • Rails 3.0.1
  • jQuery 1.4.3

Base

上のように javascript と css を記述して、次のように HTML を書きます。

image/quotation.png はクリックするモノです。その画像をクリックすると表示・非表示が切り替えます。

正確にいうなら、画像を囲んでいる span をクリックすると、その直後のタグの表示・非表示を切り替えます。つまりクリックするものは画像でなくてもよく、もっというならツールチップ以外にも使えるということです。

Use helper

Rails prepares helper component.

このメソッドを次のようにして使うと、上に書いた HTML のように出力されます。

Second argument has default value, so we don’t have to set any value to it.

私がこの tooltip 表示を書き始めたら ほかの人が随所で真似し始めたので、もっと楽にできる helper のメソッドを作ったというお話でした。