ゼロからはじめるThe Yahoo! UI Library - Tooltip編

それでは最も簡単な例から始めましょう。サンプル01は単純にツールチップを表示するスクリプトです。この状態でリンク文字上にマウスを重ねると「検索サイトです」というツールチップが表示されます。ツールチップ機能を使うにはあらかじめ必要となるスタイルシートとスクリプトファイルを読み込ませておく必要があります。まず、スタイルシートファイルであるcontainer.cssを<link>タグを使って読み込ませます。

次に3つのスクリプトファイルを<script>タグを使って読み込ませます。

サンプル01ではページが読み込まれた後にツールチップを生成し利用できるようにしています。ページが読み込まれたら処理を行うにはwindow.onload = function() { ～ }の～部分に処理を記述します。ツールチップの生成はnew YAHOO.widget.Tooltip("dlg")とします。最初のパラメータにはツールチップのID名を指定します。このID名はページ上にある<div>タグのIDではないため、任意のIDを指定できます。2番目のパラメータには表示する際のオプションを指定します。このオプションでツールチップの表示先のID名と表示するテキストを指定します。ツールチップの表示先を指定するオプションはcontextで表示します。

サンプル01ではID名context1(<a>タグ)のタグにマウスが重なったら、ツールチップを表示します。ツールチップに表示するテキストはtext:で指定します。実際にはHTMLタグも使えるので、いろいろなものを表示させることができます。

サンプル01の実行結果

サンプル01

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>YUIツールチップサンプル</title>
        <link rel="stylesheet" type="text/css" href="css/container.css"> 
        <script type="text/javascript" src="js/yahoo-dom-event.js"></script> 
        <script type="text/javascript" src="js/animation.js"></script> 
        <script type="text/javascript" src="js/container.js"></script> 
        <script type="text/javascript"><!--
            window.onload = function() {
                new YAHOO.widget.Tooltip("tip01", {
                    context : "context1",
                    text : "検索サイトです"
                } ); 
            }
        // --></script>
    </head>
    <body>
    <h1>YUIツールチップサンプル</h1>
    <div>
        <a href="http://www.google.co.jp/" id="context1">グーグル</a><br>
    </div>
    </body>
</html>

ツールチップの表示先が複数ある場合にはcontext:で指定するパラメータを配列にします。配列に表示先のタグのID名を指定します。サンプル02ではcontext1とcontext2の両IDにツールチップを表示するようにしています。どちらにマウスを重ねた場合でも同じテキストがツールチップ内に表示されます。


サンプル02の実行結果	双方のリンクにツールチップが配置されている

サンプル02

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>YUIツールチップサンプル</title>
        <link rel="stylesheet" type="text/css" href="css/container.css"> 
        <script type="text/javascript" src="js/yahoo-dom-event.js"></script> 
        <script type="text/javascript" src="js/animation.js"></script> 
        <script type="text/javascript" src="js/container.js"></script> 
        <script type="text/javascript"><!--
            window.onload = function() {
                new YAHOO.widget.Tooltip("tip01", {
                    context : [ "context1", "context2" ],
                    text : "検索サイトです"
                } ); 
            }
        // --></script>
    </head>
    <body>
    <h1>YUIツールチップサンプル</h1>
    <div>
        <a href="http://www.google.co.jp/" id="context1">グーグル</a><br>
        <a href="http://www.yahoo.co.jp/" id="context2">ヤフー</a><br>
    </div>
    </body>
</html>