SVGの基本についてまとめました。
続きを読む SVGとは何か (SVG 1.1)「CSS」タグアーカイブ
ツールチップを表示するコード
Ruby On Rails のシステムの中でツールチップを表示しようと思ったときのメモです。
やることは単純で、クリックされたらヘルプを表示して、もう一度クリックされたらヘルプを隠すというものです。はてなマークがクリックされたらツールチップを表示・非表示するということです。
実装は javascript (jQuery) と CSS で行いました。そして Rails の helper に便利メソッドを作りました。以下がそのコード。
環境
- Ruby 1.8.7p374
- Rails 3.0.1
- jQuery 1.4.3
基本
|
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>ヘルプメッセージ</p> </div> |
image/quotation.png はクリックするモノです。その画像をクリックすると表示・非表示が切り替えます。
正確にいうなら、画像を囲んでいる span をクリックすると、その直後のタグの表示・非表示を切り替えます。つまりクリックするものは画像でなくてもよく、もっというならツールチップ以外にも使えるということです。
helper の活用
Rails には helper というものがあるので活用してみます。
|
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>ヘルプメッセージ</p>', '16x16'%> |
2番目の引数はデフォルト値を設定しており、引数がなくてもいいようにしています。
私がこの tooltip 表示を書き始めたら ほかの人が随所で真似し始めたので、もっと楽にできる helper のメソッドを作ったというお話でした。
