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>

您将收到以下输出 -

输出

工具提示选项

提示中只有五个选项，而且它们都非常不言自明。

显示延迟

以毫秒为单位的整数，这将确定用户将鼠标悬停在元素上后工具提示显示之前的延迟。默认设置为 100。

隐藏延迟

就像上面的 showDelay 一样，这个整数（也以毫秒为单位）确定用户离开元素后隐藏提示之前等待的时间。默认设置为 100。

班级名称

这使您可以为工具提示换行设置类名称。默认设置为空。

抵消

这决定了工具提示将出现在距元素多远的位置。'x' 指的是向右偏移，其中 'y' 是向下偏移（如果 'fixed' 选项设置为 false，则两者都相对于光标，否则偏移是相对于原始元素的）。默认为 x: 16，y: 16

固定的

这设置了当您在元素周围移动时工具提示是否会跟随您的鼠标。如果将其设置为 true，则当您移动光标时，工具提示将不会移动，而是相对于原始元素保持固定。默认设置为 false。

工具提示事件

工具提示事件仍然很简单，就像此类的其他事件一样。有两个事件 — onShow 和 onHide，它们按照您的预期工作。

展出（）

该事件在工具提示出现时执行。如果您设置了延迟，则在延迟结束之前该事件不会执行。

隐藏()

工具提示会随着该事件的执行而隐藏。如果有延迟，则在延迟结束之前该事件不会执行。

工具提示方法

工具提示有两种方法——附加和分离。这使您可以定位特定元素并将其添加到工具提示对象（从而固有该类实例中的所有设置）或分离特定元素。

附（）

要将新元素附加到工具提示对象，只需声明提示对象、.attach(); 上的大头钉，最后将元素选择器放在方括号 () 内。

句法

toolTips.attach('#tooltipID3');

分离（）

此方法的工作原理与 .attach 方法相同，但结果完全相反。首先，声明提示对象，然后添加 .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.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>

您将收到以下输出 -

输出