【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: 'エフェクトのタイプ'});
ツールチップにマウスが重なった際にマウスを消さないようにする
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});
関連エントリー
吹き出し方式のツールチップテキスト作成Bubble Tooltips