MooTools-ツールチップ
MooToolsは、カスタムスタイルとエフェクトをデザインするためのさまざまなツールチップを提供します。この章では、ツールチップのさまざまなオプションとイベント、および要素にツールチップを追加または削除するのに役立ついくつかのツールについて学習します。
新しいツールチップの作成
ツールチップの作成は非常に簡単です。まず、ツールチップをアタッチする要素を作成する必要があります。アンカータグを作成し、それをコンストラクターのTipsクラスに追加する例を見てみましょう。次のコードを見てください。
<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' for toll tip demo"
href = "http://www.tutorialspoint.com">Tool tip _demo</a>ツールチップの作成に使用されるコードを見てください。
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);例
次の例は、ツールチップの基本的な考え方を説明しています。次のコードを見てください。
<!DOCTYPE html>
<html>
<head>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);
});
</script>
</head>
<body>
<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' for toll tip demo"
href = "http://www.tutorialspoint.com">Tool tip _demo</a>
</body>
</html>次の出力が表示されます-
出力
ツールチップオプション
ヒントには5つのオプションしかなく、それらはすべてかなり自明です。
showDelay
ミリ秒単位で測定される整数。これにより、ユーザーが要素にマウスを合わせたときにツールチップが表示されるまでの遅延が決まります。デフォルトは100に設定されています。
hideDelay
上記のshowDelayと同様に、この整数（ミリ秒単位でも測定）は、ユーザーが要素を離れた後、チップを非表示にするまでの待機時間を決定します。デフォルトは100に設定されています。
クラス名
これにより、ツールチップラップのクラス名を設定できます。デフォルトはNullに設定されています。
オフセット
これにより、ツールチップが要素からどれだけ離れて表示されるかが決まります。「x」は右オフセットを指します。「y」は下オフセットです（「fixed」オプションがfalseに設定されている場合は両方ともカーソルを基準とし、それ以外の場合はオフセットは元の要素を基準とします）。デフォルトはx：16、y：16です
修繕
これにより、要素内を移動したときにツールチップがマウスに追従するかどうかが設定されます。trueに設定すると、カーソルを移動してもツールチップは移動しませんが、元の要素に対して固定されたままになります。デフォルトはfalseに設定されています。
ツールチップイベント
このクラスの他の部分と同様に、ツールチップイベントは単純なままです。onShowとonHideの2つのイベントがあり、期待どおりに機能します。
onShow（）
このイベントは、ツールチップが表示されたときに実行されます。遅延を設定した場合、このイベントは遅延が発生するまで実行されません。
onHide（）
このイベントを実行すると、ツールチップが非表示になります。遅延がある場合、このイベントは遅延が発生するまで実行されません。
ツールチップメソッド
ツールチップには、アタッチとデタッチの2つの方法があります。これにより、特定の要素をターゲットにしてツールチップオブジェクトに追加したり（したがって、そのクラスインスタンスに固有のすべての設定を固有にしたり）、特定の要素をデタッチできます。
attach（）
新しい要素をツールチップオブジェクトにアタッチするには、チップオブジェクト、.attach（）;のタックを指定し、最後に要素セレクターを角かっこ（）内に配置します。
Syntax
toolTips.attach('#tooltipID3');dettach（）
このメソッドは.attachメソッドと同じように機能しますが、結果は完全に逆になります。最初にtipオブジェクトを記述し、次に.dettach（）を追加し、最後に要素セレクターを（）内に配置します。
Syntax
toolTips.dettach('#tooltipID3');Example
ツールチップを説明する例を見てみましょう。次のコードを見てください。
<!DOCTYPE html>
<html>
<head>
<style>
.custom_tip .tip {
background-color: #333;
padding: 5px;
}
.custom_tip .tip-title {
color: #fff;
background-color: #666;
font-size: 20px;
padding: 5px;
}
.custom_tip .tip-text {
color: #fff;
padding: 5px;
}
</style>
<script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
<script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
<script type = "text/javascript">
window.addEvent('domready', function() {
var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips, {
showDelay: 1000, //default is 100
hideDelay: 100, //default is 100
className: 'custom_tip', //default is null
offsets: {
'x': 100, //default is 16
'y': 16 //default is 16
},
fixed: false, //default is false
onShow: function(toolTipElement){
toolTipElement.fade(.8);
$('show').highlight('#FFF504');
},
onHide: function(toolTipElement){
toolTipElement.fade(0);
$('hide').highlight('#FFF504');
}
});
var toolTipsTwo = new Tips('.tooltip2', {
className: 'something_else', //default is null
});
$('tooltipID1').store('tip:text',
'You can replace the href with whatever text you want.');
$('tooltipID1').store('tip:title', 'Here is a new title.');
$('tooltipID1').set('rel', 'This will not change the tooltips text');
$('tooltipID1').set('title', 'This will not change the tooltips title');
toolTips.detach('#tooltipID2');
toolTips.detach('#tooltipID4');
toolTips.attach('#tooltipID4');
});
</script>
</head>
<body>
<div id = "show" class = "ind">onShow</div>
<div id = "hide" class = "ind">onHide</div>
<p><a id = "tooltipID1" class = "tooltip_demo" title = "1st Tooltip Title"
rel = "here is the default 'text' of 1"
href = "http://www.tutorialspoint.com">Tool tip 1</a></p>
<p><a id = "tooltipID2" class = "tooltip_demo" title = "2nd Tooltip Title"
rel = "here is the default 'text' of 2"
href = "http://www.tutorialspoint.com">Tool tip is detached</a></p>
<p><a id = "tooltipID3" class = "tooltip_demo_2" title = "3rd Tooltip Title"
rel = "here is the default 'text' of 3"
href = "http://www.tutorialspoint.com">Tool tip 3</a></p>
<p><a id = "tooltipID4" class = "tooltip_demo_2" title = "4th Tooltip Title"
rel = "here is the default 'text' of 4, i was detached then attached"
href = "http://www.tutorialspoint.com">Tool tip detached then attached
again. </a></p>
<p><a id = "tooltipID5" class = "tooltip2" title = "Other Tooltip Title"
rel = "here is the default 'text' of 'other style'"
href = "http://www.tutorialspoint.com/">A differently styled tool tip</a></p>
</body>
</html>次の出力が表示されます-
Output