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;
}

吹き出しの三角の部分は、こちらの記事を参考にしたものです。上記のソースには載せていません。
（もし上記のような吹き出しを作成する場合は、お手数ですがこちらの記事からコピペをお願いします）

ツールチップがページに複数の時

サンプル2（別窓で開きます）

ツールチップがページに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楽しいですねー。
夢がいろいろと広がります(´ω｀)