ツールチップ表示の汎用ライブラリ

ここでは、JavaScript による汎用ライブラリとして公開されている overLib について記述します。

概要

ツールチップを表示させるだけなら、標準の HTML 属性である title を使えば表示させられるのですが、overLib はツールチップ内に HTML が記述できたり、幅・表示時間・キャプション等、設定できる項目が多数にわたる便利な汎用スクリプトになっています。

ダウンロード

overLIB : http://www.bosrup.com/web/overlib/

使用方法

ダウンロードしてきた overlib.js をページに組み込むには、まずページ BODY 要素内の任意の個所に

<div id="overDiv"
     style="position:absolute; visibility:hidden; z-index:1000;"></div>
<script type="text/javascript"
     src="overlib.js"><!-- overLIB (c) Erik Bosrup --></script>

と、ツールチップ本体となるレイヤー (DIV要素) の宣言と、SCRIPT 要素による JS ファイルの読み込みを行います。

次に、実際のツールチップの作成ですが、まず最も簡単な例だと、下記のようなソースを書きます。

<a href="javascript:void(0)"
 onmouseover="return overlib('ツールチップサンプル')"
 onmouseout="return nd()">サンプル</a>

実際のサンプルはこちらです。

overlib() 関数の引数は可変引数です。例えばツールチップに表題をつけたい場合、

<a href="javascript:void(0)"
 onmouseover="return overlib('ツールチップサンプル', CAPTION, '表題')"
 onmouseout="return nd()">サンプル</a>

とすると、このような表示になります。

グローバル変数を使って同じ設定をすることも可能で、例えば、

<script>
ol_cap = '表題';
ol_text = 'ツールチップサンプル';
</script>

<a href="javascript:void(0)"
 onmouseover="return overlib()"
 onmouseout="return nd()">サンプル</a>

とすると、上のサンプルと同じ表示が出来ます（リファレンスはこちら）。ここでは、他のツールチップに影響がないように

<script>
function test() {
    // 変数に値を設定
    ol_cap = '表題２';
    ol_text = '<h4>ツールチップサンプル２</h4>';
    ol_text += 'これは他のツールチップに影響が無いように';
    ol_text += ' overlib() 関数をラップした関数を使っています。';
    
    // overlib() 関数の呼び出し
    overlib();
    
    // 変数の値をデフォルトに戻す
    ol_cap = '';
    ol_text = '';
}
</SCRIPT>

という test() 関数を定義しておき、それを下記のように呼び出すことにします。

<a href="javascript:void(0)"
 onmouseover="return test()"
 onmouseout="return nd()">サンプル</a>

サンプルはこちらです。

このようにする事で、同じページの他のツールチップに影響が無いような、個別の定義が出来ます。