自動的にtitle属性を読み出す

サンプル02では同じ内容のツールチップが表示されてしまいますが、実際にはそのようなことは多くありません。その場合には、YAHOO.widget.Tooltip()のオプション指定でtextを指定しないようにします。textオプションが指定されていない場合には、自動的にタグ内で指定されたtitle属性が読み出されて表示されます(サンプル03)。注意しないといけないのは、読み出された後、タグのtitle属性は空になってしまう点です。このため、title属性を参照しても内容が何もないことになります。

サンプル03の実行結果

各リンクに別個のツールチップを設定

サンプル03

<!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" ]
                } ); 
            }
        // --></script>
    </head>
    <body>
    <h1>YUIツールチップサンプル</h1>
    <div>
        <a href="http://www.google.co.jp/" id="context1" title="世界最大の検索サイト">グーグル</a><br>
        <a href="http://www.yahoo.co.jp/" id="context2" title="日本で最も利用されている検索サイト">ヤフー</a><br>
    </div>
    </body>
</html>

ツールチップにディレイを指定する

また、ツールチップを表示するまでのディレイ(待ち時間)はshowDelayで指定できます。指定する値はミリ秒で指定します。サンプル04では1000を指定しているので、マウスが重なってから1秒後にツールチップが表示されます。また、ツールチップが表示されてから消えるまでの時間はautodismissdelayで指定できます。指定できる値はミリ秒になります。

サンプル04の実行結果。1秒間置いてから表示される

サンプル04

<!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 : "検索サイトです",
                    showDelay : 1000
                } ); 
            }
        // --></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>