MooTools - 工具提示

上一页
下一页

MooTools 提供不同的工具提示来设计自定义样式和效果。本章我们将学习工具提示的各种选项和事件，以及一些帮助您向元素添加或删除工具提示的工具。

创建新的工具提示

创建工具提示非常简单。首先，我们必须创建我们将附加工具提示的元素。让我们来看一个创建锚标记并将其添加到构造函数中 Tips 类的示例。请看下面的代码。

<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title" 
   rel = "here is the default 'text' for toll tip demo" 
   href = "https://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 = "https://tutorialspoint.com">Tool tip _demo</a>
   </body>
   
</html>

您将收到以下输出：

输出

工具提示选项

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

showDelay

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

hideDelay

与上面的 showDelay 一样，这个整数（也以毫秒为单位）决定了用户离开元素后等待多长时间才能隐藏提示。默认设置为 100。

className

这允许您为工具提示包装器设置一个类名。默认设置为 Null。

Offset

这决定了工具提示与元素的距离。“x”指的是右侧偏移量，“y”指的是向下偏移量（如果“fixed”选项设置为 false，则相对于光标，否则偏移量相对于原始元素）。默认为 x: 16, y: 16

Fixed

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

工具提示事件

与该类的其余部分一样，工具提示事件仍然很简单。有两个事件——onShow 和 onHide，它们的工作方式与您预期的一样。

onShow()

当工具提示出现时，此事件将执行。如果您设置了延迟，则此事件只有在延迟结束后才会执行。

onHide()

工具提示在此事件执行时隐藏。如果有延迟，则此事件只有在延迟结束后才会执行。

工具提示方法

工具提示有两种方法——attach 和 detach。这允许您定位特定元素并将其添加到工具提示对象（从而继承该类实例中的所有设置）或分离特定元素。

attach()

要将新元素附加到工具提示对象，只需声明提示对象，然后添加 .attach();，最后将元素选择器放在括号 () 中。

语法

toolTips.attach('#tooltipID3');

dettach()

此方法的工作方式与 .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 = "https://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 = "https://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 = "https://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 = "https://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 = "https://tutorialspoint.com/">A differently styled tool tip</a></p>
         
   </body>
</html>

您将收到以下输出：

输出

打印页面
上一页
下一页
广告