スポンサードリンク

Yahoo! User Interface Library - Tooltip

YUI Tooltipとは

Overlayの拡張で、ポップアップを行うための機能が追加になっています。

よくマウスを合わせるとヘルプがでるようなインターフェイスがありますが、YUI Tooltipを用いるとこれが簡単に実装できるようになります。

詳しくはhttp://developer.yahoo.com/yui/container/tooltip/のオリジナルを読まれるのがよいと思います。

Tooltipを使う前準備

必要なのは5つのファイルです。もちろんインストールは済ませておく必要があります。

<script type="text/javascript" src="your install path/yahoo-min.js"></script>
<script type="text/javascript" src="your install path/dom-min.js"></script>
<script type="text/javascript" src="your install path/event-min.js"></script>
<script type="text/javascript" src="your install path/container-min.js"></script>
<link rel="stylesheet" type="text/css" href="your install pathcontainer.css" />

ポップアップを行う

YAHOO.widget.Tooltip でtextを指定する

<p id="tooltip1">
マウスを合わせるとtextが表示されます。
</p>

<script type="text/javascript">
var tooltip1 = new YAHOO.widget.Tooltip("tt1",{
    context:"tooltip1",
    text:'tooltip1.cfg.setProperty("text", "ほげほげ") とやっても同じです'
});
</script>

実際には、ToolTipもModuleを継承しているので下のようなHTMLが作成されます。

<div class="module overlay tt" id="tt1">
  <div class="bd">tooltip1.cfg.setProperty("text", "ほげほげ") とやっても同じです</div>
</div>

マウスを合わせるとtextが表示されます。

title属性をポップアップさせる

上の例のようにtextをしていななくてもtitleアトリビュートを書いておくだけでポップアップさせることができるようになります。

<b style="cursor: help;" id="tooltip2" title="ほげほげ">？</b>

<script type="text/javascript">
var tooltip2 = new YAHOO.widget.Tooltip("tt2");
tooltip2.cfg.setProperty("context", "tooltip2");
</script>

？

オプション

表示するまでの時間や、消えるまでの時間を設定することが可能です。

var tooltip3 = new YAHOO.widget.Tooltip("tt3");
tooltip3.cfg.setProperty("context", "tooltip3");

// 表示されるまでの時間0ms
tooltip3.cfg.setProperty("showdelay", 0);
// マウスをはずして表示が消えるまでの時間0ms
tooltip3.cfg.setProperty("hidedelay", 0);
// マウスを乗せたままで表示が消えるまでの時間10000ms
tooltip3.cfg.setProperty("autodismissdelay", 10000);

時間をデフォルトから変更しています

メールアドレス:
コメント^*: