Sorry, this entry is only available in 日本語.
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
|
1 2 3 4 5 6 7 8 9 10 |
.help-tooltip { max-width: 600px; background-color: #fff; display: none; z-index: 10; font-size: 12px; position: static; border: solid 1px black; padding: 2px; } |
|
1 2 3 4 5 6 7 |
$('.help-tooltip-trigger').live( 'click', function () { $(this).next().slideToggle('fast'); } ); |
上のように javascript と css を記述して、次のように HTML を書きます。
|
1 2 3 4 5 6 |
<span class="help-tooltip-trigger"> <img src="image/quotation.png" style="width:16px;height:16px;" /> </span> <div class="help-tooltip"> <p>Help Message</p> </div> |
image/quotation.png はクリックするモノです。その画像をクリックすると表示・非表示が切り替えます。
正確にいうなら、画像を囲んでいる span をクリックすると、その直後のタグの表示・非表示を切り替えます。つまりクリックするものは画像でなくてもよく、もっというならツールチップ以外にも使えるということです。
Use helper
Rails prepares helper component.
|
1 2 3 4 5 6 7 8 9 |
def help_tooltip(message, size = '16x16') result = content_tag(:span, {:class => 'help-tooltip-trigger'}) do image_tag 'icons/question.png', :size => size end result += content_tag(:div, {:class => 'help-tooltip'}) do raw message end return result end |
このメソッドを次のようにして使うと、上に書いた HTML のように出力されます。
|
1 |
<%=help_tooltip '<p>Help Message</p>', '16x16'%> |
Second argument has default value, so we don’t have to set any value to it.
私がこの tooltip 表示を書き始めたら ほかの人が随所で真似し始めたので、もっと楽にできる helper のメソッドを作ったというお話でした。
