Class: Tips

title属性とhref属性をツールチップとして表示します。

クレジット:

• Tip.jsのアイデアはBubble TooltipsとAlessandro Fulcitinitiに因っています。

注意点:

• Tipsを使うには、標準準拠モードでページを作成する必要があります。

Implements:

• Events, Options

Tipsメソッド: constructor

引数:

• elements - (いろいろ: オプション) ツールチップを適用したい要素のコレクション、セレクター、単一の要素。
• options - (オブジェクト) Tipsインスタンスをカスタマイズするためのオプション。

オプション:

• showDelay - (数: 初期値=100) showイベントが発生するまでの待ち時間。
• hideDelay - (数: 初期値=100) hideイベントが発生するまでの待ち時間。
• className - (文字列: 初期値=null) ツールチップコンテナが持つクラス名。スタイリングに役立ちます。
  • 上記のツールチップコンテナ内に入っているツールチップ要素はクラス名として'tip'を持ちます。
  • タイトルのクラス名: tip-title
  • テキストのクラス名: tip-text
• offsets - (オブジェクト: 初期値= {'x': 16, 'y': 16}) ツールチップのマウスからの距離。
• fixed - (真偽値: 初期値=false) trueにセットされていると、ツールチップはマウスに追従しません。

イベント:

• show: ツールチップが表示されたときに発生します。
• hide: ツールチップが隠れるときに発生します。

例:

HTML:

<a href="http://mootools.net" title="mootools homepage" class="thisisatooltip" />

JavaScript

var myTips = new Tips('.thisisatooltip');

Tipsイベント: show

• (関数) ツールチップが表示するときに発生し、デフォルトではツールチップを表示させます。

表記:

onShow(tip)

引数:

1. tip - (要素) ツールチップ要素。エフェクトを適用したいときに役立ちます。

例:

myTips.addEvent('show', function(tip){

    tip.fade('in');
});

Tipsイベント: hide

• (関数) ツールチップが隠れる時に発生し、デフォルトではツールチップを非表示にします。

表記:

onHide(tip)

引数:

1. tip - (要素) ツールチップ要素。エフェクトを適用するのに役立ちます。

例:

myTips.addEvent('hide', function(tip){
    tip.fade('out');

});

Tipsメソッド: attach

要素にツールチップを添附します。Tipsインスタンスにたくさんの要素を加えたいときに役立ちます。

構文:

myTips.attach(elements);

引数:

1. elements - (いろいろ) ツールチップを適用したい要素コレクション、セレクター、単一の要素。

戻り値:

• (オブジェクト) Tipsインスタンス。

例:

myTips.attach('a.thisisatip');

Tipsメソッド: detach

要素からツールチップを削除します。Tipsインスタンスから要素を削除したいときに役立ちます。

構文:

myTips.detach(elements);

引数:

1. elements - (いろいろ) ツールチップを適用したい要素コレクション、セレクター、単一の要素。

戻り値:

• (オブジェクト) このTipsインスタンス。

例:

myTips.detach('a.thisisatip');

ツールチップのHTML構造

<div class="options.className"> //オプションに渡したclassNameがここに適用されています。
    <div class="tip-top"></div> //スタイリングに役立つでしょう。

    <div class="tip">

        <div class="tip-title"></div>

        <div class="tip-text"></div>

    </div>

    <div class="tip-bottom"></div> //ここもスタイリングに役立ちます。
</div>

ストレージを利用したツールチップ

Element.Storageを使えばツールチップのタイトルと本文をアサインできます。

例:

HTML:

<a id="tip1" href="http://mootools.net" title="mootools homepage" class="thisisatooltip" />

JavaScript

$('tip1').store('tip:title', 'custom title for tip 1');

$('tip1').store('tip:text', 'custom text for tip 1');

注意点:

ストレージを利用すれば、ツールチップのタイトルや本文に要素やhtmlを入れることができます。