Mootools 1.2教程(19)——Tooltips

原文地址：30 Days of Mootools 1.2 Tutorials - Day 19 - Tooltips

Mootools 1.2工具提示（tooltip）教程

阅读上一讲：Mootools 1.2教程(18)——Class 类(第一部分)

今天我们将来看一下MooTools绑定的Tooltip插件。通过“提示（Tips）”，你可以轻松地自定义一个包含一个标题和内容的工具提示，可以自定义样式，自定义淡入淡出渐变效果。我们还将仔细学习一下工具提示的选项和事件，还有一些用来从元素上添加和移除工具提示的工具。最后，我们将学习一下怎么让一个页面有多个不同样式的工具提示。

基础知识

创建一个新的工具提示

创建一个新的工具提示非常简单。首先，我们来创建一个要添加工具提示的链接：

参考代码： 

<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，你可以通过它们来轻松地在顶部和底部添加圆角，或者其他样式效果。

现在，让我们来创建一个我们的第一个选项并添加一些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 
}