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.finddevguides.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.finddevguides.com">Tool tip _demo</a>
   </body>

</html>

次の出力が表示されます-

出力

ツールチップオプション

ヒントには5つのオプションしかなく、それらはすべて一目瞭然です。

showDelay

ミリ秒単位で測定される整数。これは、ユーザーが要素にマウスを合わせてからツールチップが表示されるまでの遅延を決定します。デフォルトは100に設定されています。

hideDelay

上記のshowDelayと同様に、この整数（ミリ秒単位でも測定）は、ユーザーが要素を離れたときにチップを隠すまでの待機時間を決定します。デフォルトは100に設定されています。

クラス名

これにより、ツールチップラップのクラス名を設定できます。デフォルトはNullに設定されています。

オフセット

これにより、ツールチップが表示される要素からの距離が決まります。「x」は右オフセットを指します。「y」は下方向オフセットです（「固定」オプションがfalseに設定されている場合はカーソルを基準に、それ以外の場合はオフセットは元の要素を基準にします）。デフォルトはx：16、y：16

一定

これは、要素の周りを移動した場合にツールチップがマウスに従うかどうかを設定します。 trueに設定すると、カーソルを移動してもツールチップは移動しませんが、元の要素に対して固定されたままになります。デフォルトはfalseに設定されています。

ツールチップイベント

このクラスの残りの部分のように、ツールチップイベントは単純なままです。 onShowとonHideの2つのイベントがあり、期待どおりに機能します。

onShow（）

このイベントは、ツールチップが表示されたときに実行されます。遅延を設定すると、遅延が発生するまでこのイベントは実行されません。

onHide（）

ツールチップは、このイベントの実行で非表示になります。遅延がある場合、遅延が発生するまでこのイベントは実行されません。

ツールチップメソッド

ツールチップには、アタッチとデタッチの2つの方法があります。これにより、特定の要素をターゲットにしてツールチップオブジェクトに追加し（それにより、そのクラスインスタンスのすべての設定に固有）、特定の要素を切り離すことができます。

attach（）

新しい要素をツールチップオブジェクトにアタッチするには、単にティップオブジェクトを記述し、.attach（）;にタックを付け、最後に要素セレクターをブラケット（）内に配置します。

構文

toolTips.attach('#tooltipID3');

dettach（）

このメソッドは.attachメソッドと同じように機能しますが、結果はまったく逆です。まず、tipオブジェクトを記述し、次に.dettach（）を追加し、最後に（）内に要素セレクターを配置します。

構文

toolTips.dettach('#tooltipID3');

例

ツールチップを説明する例を見てみましょう。次のコードを見てください。

<!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.finddevguides.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.finddevguides.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.finddevguides.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.finddevguides.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.finddevguides.com/">A differently styled tool tip</a></p>

   </body>
</html>