ツールチップを表示する方法

HTML要素のonmouseoverイベントでJavaScriptの関数を呼び出すことで、ツールチップを表示できます。

概要

ツールチップ自体はdiv要素で定義し、CSSのposition属性でabsoluteとすることで、マウスポインタの位置に表示できます。

実行例

ここにマウスポインタを重ねると、ツールチップが表示されます。

スタイルシート (CSS) によるスタイルの定義

ツールチップの表示スタイルは、スタイルシートで設定します。

影を表すdiv要素に、内容を表すdiv要素が内包される形になるため、影のposition属性をabsoluteとして内容をrelativeとします。影を半透明で表示するには、透明度が設定されたPNGファイルを用意し、それを背景として設定します。

表示サンプル
/* 内容 */
.tooltip-content {
    position: relative;
    left: -3px;
    top: -3px;

    background-color: #ffffe1;
    border: 1px black solid;
    padding: 3px;
}
/* 影 */
.tooltip-shadow {
    position: absolute;
    background-image: url('images/shadow.png');
}

JavaScriptによる表示の制御

Tooltipクラス

ツールチップとなるHTMLの要素を作成します。

// ツールチップ
function Tooltip()
{
    // 内容
    this.content = document.createElement( 'div' );
    this.content.className = 'tooltip-content';

    // 影
    this.shadow = document.createElement( 'div' );
    this.shadow.className = 'tooltip-shadow';

    this.shadow.appendChild( this.content );
}

Tooltip.DELAY = 300; // 表示するまでの遅延時間
Tooltip.OFFSET = 5;  // マウスポインタからのオフセット

ツールチップの表示

// ツールチップを表示する
Tooltip.prototype.Show = function( text, x, y )
{
    // 内容
    while( this.content.hasChildNodes() )
    {
        this.content.removeChild( this.content.lastChild );
    }
    this.content.appendChild( document.createTextNode( text ) );

    // 影
    this.shadow.style.left = x + 'px';
    this.shadow.style.top = y + 'px';
    this.shadow.style.visibility = 'visible';


    if( this.shadow.parentNode != document.body )
    {
        // ドキュメントのbody要素に追加する
        document.body.appendChild( this.shadow );
    }
}

ツールチップを隠す

// ツールチップを隠す
Tooltip.prototype.Hide = function()
{
    this.shadow.style.visibility = 'hidden';
}

ツールチップの表示を遅延

マウスポインタを重ねてから一定時間の後に表示されるようにするため、setTimeout()メソッドを使用してツールチップを表示するメソッドを呼び出しています。

またツールチップを消去するために、onmouseoutイベントへの登録を行っています。

// ツールチップの表示を予定する
Tooltip.prototype.Schedule = function( targetElement, event )
{
    var e = event || window.event;

    var x = e.clientX;
    var y = e.clientY;

    // マウスポインタの位置をドュメント座標に正する
    x += window.pageXOffset || document.documentElement.scrollLeft;
    y += window.pageYOffset || document.documentElement.scrollTop;

    // イベントハンドラ内で処理できthisンす
    var _this = this;


    // タイムアウト処理を設定する
    var timerID = window.setTimeout(
        function()
        {
            var text = targetElement.getAttribute( 'tooltip' );

            // ツールチップを示す
            _this.Show(
                text,
                x + Tooltip.OFFSET,
                y + Tooltip.OFFSET
                );
        },
        Tooltip.DELAY
        );


    function MouseOut()
    {
        // ツールチップを隠す
        _this.Hide();

        // 未処理のタイムアウト処理を取消す
        window.clearTimeout( timerID );

        // イベントハンドラを削除する
        if( targetElement.removeEventListener )
        {
            targetElement.removeEventListener( 'mouseout', MouseOut, false );
        }
        else
        {
            // IE用の処理
            targetElement.detachEvent( 'onmouseout', MouseOut );
        }
    }

    // イベントハンドラを登録する
    if( targetElement.addEventListener )
    {
        targetElement.addEventListener( 'mouseout', MouseOut, false );
    }
    else
    {
        // IE用の処理
        targetElement.attachEvent( 'onmouseout', MouseOut );
    }
}

≫イベントの使用方法

表示対象となるHTML要素

ツールチップクラスのオブジェクトを生成し、表示対象となるHTML要素のonmouseoverイベントでSchedule()メソッドを呼び出します。

ツールチップに表示するテキストは、独自に定義したtooltip属性で設定します。

<script type="text/javascript">
  // ツールチップを生成する
  var tooltip = new Tooltip();
</script>

<p onmouseover="tooltip.Schedule( this, event );" tooltip="ツールチップ">
テキスト</p>

関連ページ

JavaScriptのドキュメントから検索