Class: Tips

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

クレジット:

注意点:

Implements:

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を入れることができます。

このドキュメントはMooToolsのドキュメントを元に高橋文樹が翻訳(ちょっと改変)しました。
本家と同じく、Attribution-NonCommercial-ShareAlike 3.0ライセンスで公表されています。

トップに戻る