もっと便利に!jQueryでラクラクサイト制作(実践サンプル付き)

第16回 jQueryで楽々実装できるツールチッププラグインを作ってみよう

この記事を読むのに必要な時間:およそ 6 分

ツールチッププラグインの作成

ツールチップをDOMに追加する

var toolTip = $('<div id="toolTip"></div>');
$('body').append(toolTip);

実行時に受け取る要素からtitleまたはalt属性を持っているものに絞る

ここで前述のfilterを使います。以下は,titleまたはalt属性を持っているもののみを返します。

$(this).filter(function(){
    return this.title || this.alt;
})

対象とする要素に実行する機能を割り当てる

filterで対象を絞り,eachで対象全てに機能を割り当てます。まずは,何度も使うのでselfに$(this)のエイリアスを当てておきましょう。

$(this).filter(function(){
    return this.title || this.alt;
}).each(function(){
    var self = $(this);
    var target = this.title ? 'title' : 'alt'; // ①
    var tipText = self.attr(target); // ②
});

targetはtitleまたはaltになりますが,両方持っている場合も考えられるので,その場合はtitle属性を優先するように3項演算子を使います。上記の①は以下のようにも書くことができます。

if(this.title){
    var target = 'title';
}else{
    var target = 'alt';
}

取得したtargetの値を②で保存しておきます。

ツールチップの表示,非表示

hoverメソッドを使ってmouseover,mouseout時の動作を記述します。

self.hover(function(e){
    toolTip
        .stop(true,true)
        .fadeIn('fast')
        .text(tipText)
        .css({
            position: 'absolute',
            top: e.pageY - 20,
            left: e.pageX + 20
        })
},function(){
    toolTip.fadeOut('fast');
});

ここでのポイントは,カーソルが要素に乗ったときにツールチップを表示させるのですが,マウスカーソルの右上あたりにツールチップを表示することです。

カーソル位置の取得

カーソルの右上あたり,をcssメソッドを使って指定するのですが,これには,mouseoverにbindする無名関数の引数のe(識別できればなんでもよい)を利用します。引数eは関数内でpageYやpageXといったプロパティを持ち,この2つの値からカーソルの位置を得ることができます。今回のサンプルではカーソルから右上に20pxずつずらして表示しています。

画像

.css({
    position: 'absolute',
    top: e.pageY - 20, // カーソルを基準として上へ20px
    left: e.pageX + 20 // カーソルを基準として右へ20px
})

カーソルに追従するツールチップ

このことを利用して,要素上でカーソルが動いたときはカーソルに追従するようにcssの値を書き換えます。次のサンプルを見るとカーソルが動くたびにコンソールにカーソル位置が表示されるのが分かると思います。

$('html').mousemove(function(e){
    console.log('Y: '+e.pageY+'\nX: '+e.pageX);
});

画像

ツールチッププラグインにもmousemoveの処理を追加します。

self.hover(function(e){
    toolTip
        .stop(true,true)
        .fadeIn('fast')
        .text(tipText)
        .css({
            position: 'absolute',
            top: e.pageY - 20,
            left: e.pageX + 20
        })
},function(){
    toolTip.fadeOut('fast');
}).mousemove(function(e){
    // カーソルに追従させる
    toolTip.css({
        top: e.pageY - 20,
        left: e.pageX + 20
    });
});

ブラウザデフォルトのツールチップを無効にする

画像

ここまででほぼ完成ですが,titleやalt属性を持っている値にカーソルが乗ったとき,ブラウザデフォルトの機能でツールチップが表示される場合があります。今回実装するツールチップと機能が若干かぶるので,表示しないようにします。具体的には,mouseover時にtitleまたはalt属性を削除し,mouseout時に追加する2文を追加するだけです。

self.hover(function(e){
    self.attr(target,''); // titleまたはalt属性を削除
    toolTip
        .stop(true,true)
        .fadeIn('fast')
        .text(tipText)
        .css({
            position: 'absolute',
            top: e.pageY - 20,
            left: e.pageX + 20
        })
},function(){
    self.attr(target,tipText); // 削除したtitleまたはalt属性を追加
    toolTip.fadeOut('fast');
})

以上で完成です。実行してみましょう!

jQuery(function($){
    $('a,span,img').easyToolTip();
});

著者プロフィール

長谷川広武(はせがわひろむ;h2ham)

1984年生まれ。出版会社勤務でWeb製作・運用更新の経験を経て,2009年より株式会社24-7に入社。Webサイトの運用更新業務を中心に制作業務を行う。各種CMSのカスタマイズやjQueryを利用したUI設計などを得意とする。ブログではjQueryや日々の思いなど書いたり,自作のjQueryプラグインなどを公開している。

http://h2ham.seesaa.net/


徳田和規(とくだかずのり;5509;nori)

マインドフリー株式会社,ディレクター。Web製作会社にてHTML/CSSコーディングなどの業務を行いながらAjax/JavaScriptに興味を持ち,ブログで自作のjQueryプラグインなどを公開する。2009年9月からマインドフリー株式会社に参加。

http://moto-mono.net/