【Adobe Spry TIPS】 ツールチップ

ツールチップは文字などにマウスが重なったときに、詳細内容など表示する為の機能になります。

Adobe Spryの準備は【Adobe Spry TIPS】Spryを準備する。を参考にしてください。

head要素内での設定

ツールチップはSpryTooltip.jsウィジェットを利用します。

<script type="text/javascript" src="./includes/SpryDOMUtils.js"></script>
<script type="text/javascript" src="./widgets/tooltip/SpryTooltip.js"></script>

script要素内でSpry.Widget.Tooltipを利用してトリガー(マウスオーバーする要素のid)とツールチップ(マウスオーバーされた際に表示する要素のid)を記述します。

トリガーには#をつける必要はありません。

<script type="text/javascript">
Spry.Utils.addLoadListener(function(){
	new Spry.Widget.Tooltip("トリガー", "ツールチップ");
})
</script>

具体的に設定した場合、以下のようになります。

<script type="text/javascript">
Spry.Utils.addLoadListener(function(){
	new Spry.Widget.Tooltip("tooltip", "#trigger");
})
</script>

body要素内での設定

トリガーとツールチップを記述します。

<div id="trigger">マウスを乗せてください。</div>
<div id="tooltip">ツールチップが表示されます。</div>

以上でツールチップの設定は完了です。

サンプル

少し時間がたってから表示する

時間を置いて表示したい場合は、Spry.Widget.Tooltip時にshowDelayを設定します。
指定する値はミリ秒になります。

 new Spry.Widget.Tooltip("tooltip", "#trigger",{showDelay: 1000});

サンプル

少し時間がたってから表示を消す

マウスをはずしても少しの間表示しておきたい場合は、Spry.Widget.Tooltip時にhideDelayを設定します。
指定する値はミリ秒になります。

 new Spry.Widget.Tooltip("tooltip", "#trigger",{hideDelay: 1000});

サンプル

トリガーにhover Classを設定する

マウスオーバー時にトリガー要素にCSSを適用させたい場合は、hoverClass:クラス名という形で設定します。

new Spry.Widget.Tooltip("tooltip", "#trigger",{hoverClass:"enlarge"});

サンプル

ツールチップの表示位置を設定する

ツールチップの表示位置はoffsetXとoffsetYを利用して設定します。

単位はCSSで指定できる単位になります。

new Spry.Widget.Tooltip("tooltip", "#trigger",{offsetX: "-50px", offsetY: "30px"});

サンプル

ツールチップの表示時のエフェクトをコントロールする

ツールチップの表示時のエフェクトはuseEffectで設定します。
エフェクトのタイプはfeedとBlindを選択できます。

new Spry.Widget.Tooltip("tooltip", "#trigger",{useEffect: 'エフェクトのタイプ'});

Feedのサンプル / Blindのサンプル

ツールチップにマウスが重なった際にマウスを消さないようにする

closeOnTooltipLeaveをtrueに設定することによりツールチップとマウスが重なった際に、ツールチップが消えないように設定することが可能です。

offsetXやoffsetY、hideDelayと合わせて利用して、トリガーからツールチップにマウスを移動できるようにしておきましょう。

new Spry.Widget.Tooltip("tooltip", "#trigger",{closeOnTooltipLeave: true, offsetY:"-20px"});

サンプル

ツールチップがマウスに合わせて移動するようにする

followMouseをtrueに設定することにより、マウスの移動に合わせてツールチップが移動するようになります。

new Spry.Widget.Tooltip("tooltip", "#trigger",{followMouse: true});

サンプル

【Adobe Spry TIPS】 目次

関連エントリー

吹き出し方式のツールチップテキスト作成Bubble Tooltips

スポンサードリンク

«CSS Nite 「MT4LP5」 | メイン | 複数のjsライブラリを利用する際にonloadを書き換える方法»