2013.5.19
【jQuery習作】ツールチップ
現在通っている @YumiSora 先生のJavaScript講座で習ったことを応用して、シンプルなツールチップを作ってみました。
ツールチップがページに1つの時
「?」にカーソルを当てると、吹き出しが表示されます。
(IE8以上、Chrome、Firefox、Safariで動作確認済です)
HTML
?ヘルプの内容が入ります
jQuery
$(function() { //tooltip 1つのとき var tooltip = $(".tooltip"); var balloon = $(".balloon"); balloon.css("display","none"); tooltip.hover(function () { balloon.css("display","block"); }, function () { balloon.css("display","none"); }); });
CSS
.box { position: relative; margin: 0 0 30px; } .help { border-radius: 20px; background: #32c387; display: inline-block; width: 40px; line-height: 40px; cursor: pointer; color: #c4f4e0; font-size: 20px; text-align: center; zoom: 1; } .help:hover { background: #13a367; color: #ffffff; } /* 吹き出し */ .balloon { border: 1px solid #bbb; background: #ffffff; position: absolute; width: 300px; padding: 7px 12px; top: -17px; left: 60px; font-size: 16px; text-align: left; }
吹き出しの三角の部分は、こちらの記事を参考にしたものです。上記のソースには載せていません。
(もし上記のような吹き出しを作成する場合は、お手数ですがこちらの記事からコピペをお願いします)
ツールチップがページに複数の時
ツールチップがページに1つの時は、上の書き方で良いと思うのですが、複数の場合もありますよね。
なので、ツールチップ1のときは吹き出し1が出る、ツールチップ2のときは吹き出し2が出る、のようにしてみました。
クラス名に「.tooltip」がついているものから、マウスオーバーされたものが何番目かを数え、クラス名「.balloon」のついているタグの中でその番号と対応したものを表示します。
HTMLとCSSは上記と同様です。
(HTMLは「.box」を増やすだけ)
jQuery
$(function() { //tooltip 複数あるとき var tooltip = $(".tooltip"); var balloon = $(".balloon"); balloon.css("display","none"); tooltip.hover(function () { var num_tooltip = tooltip.index(this); balloon.eq(num_tooltip).css("display","block"); }, function () { balloon.css("display","none"); }); });
他にもっとスマートな書き方があったりするのでしょうか。
まだまだ練習中なので、こういう書き方の方がわかりやすいよ、とかあったら教えていただけると嬉しいです。
jQuery楽しいですねー。
夢がいろいろと広がります(´ω`)
Tags :