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

创建一个新的工具提示

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

Tool tip _demo

查看用于创建工具提示的代码。

var customTips = $$('.tooltip_demo');
var toolTips = new Tips(customTips);

例

以下示例说明了工具提示的基本概念。看一下下面的代码。

      
      
      
   
   
   
      Tool tip _demo
   
   

您将收到以下输出-

输出

工具提示选项

提示中只有五个选项，它们都是不言自明的。

showDelay

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

hideDelay

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

班级名称

这使您可以设置工具提示包装的类名称。默认设置为Null。

抵消

这确定了工具提示将与元素相距多远。 “ x”是指右偏移量，其中“ y”是向下偏移量（如果“ fixed”选项设置为false，则两者都相对于游标，否则相对于原始元素）。默认值为x：16，y：16

固定

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

工具提示事件

工具提示事件保持简单，就像本课程的其余部分一样。有两个事件-onShow和onHide，它们按您期望的那样工作。

展出（）

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

onHide（）

执行此事件时，工具提示将隐藏。如果存在延迟，则直到延迟结束，此事件才会执行。

工具提示方法

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

连接（）

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

句法

toolTips.attach('#tooltipID3');

dettach（）

此方法的工作方式与.attach方法相同，但结果完全相反。首先，声明技巧对象，然后添加.dettach（），最后将元素选择器放置在（）中。

句法

toolTips.dettach('#tooltipID3');

例

让我们以说明工具提示的示例为例。看一下下面的代码。

      
      
      
      
      
   

   
      
onShow
      
onHide
      
      
Tool tip 1
         
      
Tool tip is detached
         
      
Tool tip 3
         
      
Tool tip detached then attached 
         again. 
         
      
A differently styled tool tip
         
   

您将收到以下输出-

输出