« ヘルプ付きのテキストボックス | トップページ | 角丸 »

2007年8月 1日 (水)

ツールチップ

マウスを指定したHTML要素の上に置いたときに、説明などの情報をポップアップ表示するTooltipを作成できる。 Tooltipを作成するときは、dojo.widget.Tooltipをrequireする。

dojo.require("dojo.widget.Tooltip");

TooltipはdojoType="tooltip"を指定して作成する。このとき、connectId属性としてTooltipを付けるHTML要素のIDを指定する。dojoType="tooltip"を指定したHTML要素の子要素に、Tooltipとして表示する内容を指定する。

以下の例では、文字列「text」にマウスを置くと「てすと」とポップアップ表示される。

<div id="one">text</div>
<div dojoType="tooltip" connectId="one" toggle="explode">
  <div style="color: blue;">てすと</div>
</div>
text
てすと

Tooltipとして表示する内容は、子要素として指定するだけでなく、caption属性として文字列、href属性としてURL指定することもできる。

その他、Tooltipは以下の属性を指定できる。

属性概要
connectId Tooltipを付けるHTML要素のID
caption Tooltipとして表示する説明文。captionを指定したときは、Tooltip要素の子要素は不要
showDelay マウスを置いてからTooltipを表示するまでの時間
hideDelay マウスが外れてからTooltipを隠すまでの時間
toggle Tooltipの表示方法として、"plain", "wipe", "fade", "explode"のいずれかを指定できる
toggleDuration toggleで指定した効果の実行時間をミリ秒単位で指定する
href Tooltipに表示する内容としてHTMLのURLを指定する
executeScripts hrefでURLを指定したときにHTML内のJavaScriptを有効にするか、true/falseで指定する

« ヘルプ付きのテキストボックス | トップページ | 角丸 »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/232684/7376358

この記事へのトラックバック一覧です: ツールチップ:

« ヘルプ付きのテキストボックス | トップページ | 角丸 »