[JS]実装のロジックを理解して、自分に適したツールチップを作成するチュートリアル

サイト構築 -JavaScript

Post on:2010年10月15日

sponsorsr

ツールチップのスクリプトやプラグインは、数多くリリースされています。
ここではjQueryを使用したツールチップをどのようなロジックで実装するかを解説したチュートリアルを紹介します。

Simple Tooltip w/ jQuery & CSS
デモページ

[ad#ad-2]

下記は各ポイントを意訳したものです。

1. マークアップ -HTML
2. スタイル -CSS
3. エフェクト -jQuery
4. スクリプトのロジック
5. 注意点

1. マークアップ -HTML

マークアップをする際に気をつけることは可能な限りシンプルするのと同時に、さまざまなシナリオに対応できるよう柔軟にすることです。

メインとなるa要素にはツールチップを表示するために、class名「tip_trigger」を記述します。また、ツールチップのコンテンツを配置するspan要素には、class名「tip」を記述します。

&lt;a&nbsp;href=&quot;#&quot;&nbsp;class=&quot;tip_trigger&quot;&gt;Your&nbsp;Link&nbsp;Key&nbsp;Word&nbsp;&lt;span&nbsp;class=&quot;tip&quot;&gt;This&nbsp;will&nbsp;show&nbsp;up&nbsp;in&nbsp;the&nbsp;tooltip&lt;/span&gt;&lt;/a&gt;

1	<a href="#" class="tip_trigger">Your Link Key Word <span class="tip">This will show up in the tooltip</span></a>

2. スタイル -CSS

スタイルシートも信じられないほどシンプルです。
これを元にし、さらにクリエイティブなものを作ってください。

ツールチップはデフォルトでは隠れた状態で、jQueryを使用してホバー時に表示されます。このツールチップのエレメントを一番上に表示するために、positionに「absolute」、z-indexに「1000」を指定します。

.tip {
    color: #fff;
    background:#1d1d1d;
    display:none; /*--Hides by default--*/
    padding:10px;
    position:absolute;    z-index:1000;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.tip {

color: #fff;

background:#1d1d1d;

display:none; /*--Hides by default--*/

padding:10px;

position:absolute; z-index:1000;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

}

[ad#ad-2]

3. エフェクト -jQuery

jQueryが分からない場合は、最初にサイトをチェックしてjQueryがどのように機能するのか概略をつかんでください。
※訳者注：当サイトでもjQueryに関するコンテンツがあるので、チェックしてみてください。
コリス内のjQuery関連の記事

最初のステップ -jQueryファイルの設置

jQueryのサイトから「jquery.js」をダウンロードして、自分の使用しているサーバーに設置します。
または、Googleにホストされているファイルを使用することもできます。その際は、下記のように記述します。

&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js&quot;&gt;&lt;/script&gt;

1	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

jQueryファイルの設置が完了したら、その後の行に<script>を使用して、下記のスクリプトを記述します。

$(document).ready(function() {
    //Tooltips
    $(".tip_trigger").hover(function(){
        tip = $(this).find('.tip');
        tip.show(); //Show tooltip
    }, function() {
        tip.hide(); //Hide tooltip
    }).mousemove(function(e) {
        var mousex = e.pageX   20; //Get X coodrinates
        var mousey = e.pageY   20; //Get Y coordinates
        var tipWidth = tip.width(); //Find width of tooltip
        var tipHeight = tip.height(); //Find height of tooltip

        //Distance of element from the right edge of viewport
        var tipVisX = $(window).width() - (mousex   tipWidth);
        //Distance of element from the bottom of viewport
        var tipVisY = $(window).height() - (mousey   tipHeight);

        if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
            mousex = e.pageX - tipWidth - 20;
        } if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
            mousey = e.pageY - tipHeight - 20;
        }
        //Absolute position the tooltip according to mouse position
        tip.css({  top: mousey, left: mousex });
    });
});

$(document).ready(function() {

//Tooltips

$(".tip_trigger").hover(function(){

tip = $(this).find('.tip');

tip.show(); //Show tooltip

}, function() {

tip.hide(); //Hide tooltip

}).mousemove(function(e) {

var mousex = e.pageX 20; //Get X coodrinates

var mousey = e.pageY 20; //Get Y coordinates

var tipWidth = tip.width(); //Find width of tooltip

var tipHeight = tip.height(); //Find height of tooltip

//Distance of element from the right edge of viewport

var tipVisX = $(window).width() - (mousex tipWidth);

//Distance of element from the bottom of viewport

var tipVisY = $(window).height() - (mousey tipHeight);

if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport

mousex = e.pageX - tipWidth - 20;

} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport

mousey = e.pageY - tipHeight - 20;

}

//Absolute position the tooltip according to mouse position

tip.css({ top: mousey, left: mousex });

});

4. スクリプトのロジック

.tipセレクタ

tipには「$(this).find('.tip')」を割り当てています。これによりdom操作を行います。
ホバーの判定

ホバーになった際は「.tip」を表示し、ホバーがはずれた際は「.tip」を隠します。
マウスオーバー

マウスイベントをトリガーにする際は、「e.pageX」と「e.pageY」でマウスの座標を取得します。ここでは少し余裕をもたせるために、それぞれ20pxをプラスしています。
変数のセット

ツールチップが表示領域からはみだしてしまう場合を考慮する必要があります。ここでは、ツールチップを表示するポジションを変更します。このポジションを決めるために、ツールチップの幅（tipWidth）と高さ（tipHeight）を取得します。はみだしたかどうか検出するためには、表示領域の幅と高さから、座標にツールチップの幅と高さをプラスした値をマイナスします。
ツールチップが水平方向にはみだす場合

ツールチップが表示領域から水平方向にはみだす場合は、マウスの左側にツールチップを表示します。これはマウスのX座標を取得し、ツールチップの幅をマイナスすることで計算します。
ツールチップが垂直方向にはみだす場合

ツールチップが表示領域から垂直方向にはみだす場合は、マウスの上側にツールチップを表示します。これはマウスのY座標を取得し、ツールチップの高さをマイナスすることで計算します。
デフォルトの設定

ツールチップが表示領域から水平・垂直方向にはみださない場合は、デフォルトの状態としてマウスの右下側にツールチップを表示します。そして、マウスの動きに追従するようにセットします。

5. 注意点

function内に繋がれた二つのイベントがあることに注目してください。「.hover()」と「.mouover()」に精通していない場合は、各ドキュメントに目を通しておいてください。
また、「tipVisX < 20」「tipVisY < 20」にも注目してください。これは、ツールチップに10pxのパディングを与えるために使用しています。

デモページ