Mootools 1.2教程 Tooltips
2024-05-06 14:13:52
供稿：网友
我们还将仔细学习一下工具提示的选项和事件，还有一些用来从元素上添加和移除工具提示的工具。最后，我们将学习一下怎么让一个页面有多个不同样式的工具提示。
基础知识
创建一个新的工具提示
创建一个新的工具提示非常简单。首先，我们来创建一个要添加工具提示的链接：
参考代码： 代码如下:
<a class="tooltipA" title="1st Tooltip Title" rel="here is the default 'text' of 1" href="http://www.consideropen.com">Tool tip 1</a>
MooTools 1.2工具提示将默认显示链接中的title和rel属性的值。如果没有rel属性，将显示href属性值。
现在来创建一个新的默认工具条提示：
参考代码：
代码如下:
var customTips = $$('.tooltipA');
var toolTips = new Tips(customTips);
由于没有使用任何样式，你将看到下面这样的工具提示：
Tool tip 1
为你的工具提示使用样式
MooTools可以让你在很大程度上控制它的输出——我们来看一下工具提示的html代码：
参考代码：
代码如下:
// 你可以在options中指定
// 工具提示容器的CSS类名
<div class="options.className">
<div class="tip"></div>
</div>
留意一下顶部和底部的div，你可以通过它们来轻松地在顶部和底部添加圆角，或者其他样式效果。
现在，让我们来创建一个我们的第一个选项并添加一些CSS。上面的html代码将用名为“options.className”的CSS样式来渲染。通过给我们的工具提示来指定一个CSS类名，我们就可以给它一个独立的样式而不会影响页面上的其他MooTools工具提示。
参考代码：
代码如下:
var customTipsB = $$('.tooltipB');
var toolTipsB = new Tips(customTipsB, {
className: 'custom_tip'
});
最后，我们再添加一些CSS：
参考代码：
代码如下:
.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
}
Tool tip 2
选项
在Tips类中总共只有五个选项，每个都有很好的自解释性（也就是一看就明白什么意思了）。
showDelay
默认值为100
一个以毫秒为单位的整数，这将决定工具提示在鼠标移动到元素上面多久后再显示出来。
hideDelay
默认值为100
和上面的showDelay一样，不过这个值（也是以毫秒为单位）将决定当鼠标离开元素多久以后隐藏工具提示。
className
默认为null
就像你在上面的示例中看到的一样，这可以让你为工具提示容器设置一个CSS类名。
offsets
默认为 x:16, y:16
这将决定工具提示离你的元素的距离，x值为离元素往右的距离，y为离元素往下的距离（如果指定了fixed选项为false，将是相对于鼠标指针的距离，否则将是相对于元素的距离）。
