MooTools - 工具提示

更新于 2025/1/26 8:37:17

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>

您将收到以下输出 −

输出

工具提示选项

提示中只有五个选项，它们都非常容易理解。

showDelay

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

hideDelay

与上面的 showDelay 一样，这个整数(也以毫秒为单位)决定用户离开元素后隐藏提示之前要等待多长时间。默认值为 100。

className

这可让您为工具提示包装设置类名。默认值为 Null。

偏移量

这决定了工具提示与元素之间的距离。'x' 表示右偏移量，'y' 表示下偏移量(如果'fixed' 选项设置为 false，则两者均相对于光标，否则偏移量相对于原始元素)。默认值为 x:16，y:16

固定

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

工具提示事件

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

onShow()

此事件在工具提示出现时执行。如果您设置了延迟，则此事件将不会执行，直到延迟结束。

onHide()

工具提示会随着此事件的执行而隐藏。如果有延迟，则此事件将不会执行，直到延迟结束。

工具提示方法

工具提示有两种方法 - 附加和分离。这样您就可以定位特定元素并将其添加到工具提示对象(从而继承该类实例中的所有设置)或分离特定元素。

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 = "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>

您将收到以下输出 −

输出

❮ MooTools Accordion MooTools 选项卡式内容 ❯

MooTools 教程

MooTools 有用资源