MooTools - 工具提示

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

创建新的工具提示

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

Tool tip _demo

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

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

示例

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

                                    window.addEvent('domready', function() {            var customTips = $$('.tooltip_demo');            var toolTips = new Tips(customTips);         });                     Tool tip _demo      

Tooltip Options

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

showDelay

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

hideDelay

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

className

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

Offset

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

Fixed

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

Tooltip Events

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

onShow()

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

onHide()

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

Tooltip Methods

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

attach()

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

Syntax

toolTips.attach('#tooltipID3');

dettach()

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

Syntax

toolTips.dettach('#tooltipID3');

Example

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

                                                   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');         });                  onShow