tips.md

一款开源强大的javascript控件

Class: Tips {#Tips}
===================

浮动提示信息框

### Credits:

- The idea behind Tips.js is based on [Bubble Tooltips](http://web-graphics.com/mtarchive/001717.php) by [Alessandro Fulcitiniti](http://web-graphics.com/)

### 备注:

- Tips 需要页面使用[标准模式](http://hsivonen.iki.fi/doctype/)的DOCTYPE

### 实现:

- [Events][], [Options][]

Tips 方法: constructor {#Tips:constructor}
--------------------------------------------

### 参数:

* elements - (*mixed*: 可选) 要使用提示信息框的元素,元素集合, 或是一个CSS选择器
* options  - (*object*) 参见如下可选项:

### 可选项:

* showDelay     - (*number*: 默认为 100)  提示信息显示前的延迟时间(毫秒)
* hideDelay     - (*number*: 默认为 100)  提示信息隐藏前的延迟时间(毫秒)
* className     - (*string*: 默认为 null) 提示信息的容器元素的样式类名
 * 容器内的标题和正文的包装元素的样式类名为: tip
 * 提示标题部分元素的样式类名为: tip-title
 * 提示正文部分元素的样式雷名为: tip-text
* offsets       - (*object*: 默认为 {'x': 16, 'y': 16}) 提示信息框相对鼠标的偏移位置
* fixed         - (*boolean*: 默认为 false) 如果为true, 则提示信息不会跟着鼠标移动


### 事件:
 
 * hide: 当提示信息框隐藏时触发
 * show: 当提示信息框显示时触发

### 示例:

#### HTML:

	<a href="http://mootools.net" title="mootools homepage" class="thisisatooltip" />

#### JavaScript

	var myTips = new Tips('.thisisatooltip');
	

Tips 事件: show {#Tips:show}
---------------------------------

* (*function*) 当提示信息正在显示时触发

### 标识:

	onShow(tip)

### 参数:

1. tip - (*element*) 提示信息的容器元素

### 示例:

	myTips.addEvent('show', function(tip){
		tip.fade('in');
	});

Tips 事件: hide {#Tips:hide}
---------------------------------

* (*function*) 当提示信息正在隐藏时触发

### 标识:

	onHide(tip)

### 参数:

1. tip - (*element*) 提示信息的容器元素

### 示例:

	myTips.addEvent('hide', function(tip){
		tip.fade('out');
	});



Tips 方法: attach {#Tips:attach}
----------------------------------

为元素添加提示信息功能.

###	语法:

	myTips.attach(elements);

###	参数:

1. elements - (*mixed*) 要使用提示信息框的元素, 元素集合, 或是一个CSS选择器

###	返回值:

* (*object*) Tips实例

### 示例:

	myTips.attach('a.thisisatip');


Tips 方法: detach {#Tips:detach}
----------------------------------

去除元素的提示信息功能.

###	语法:

	myTips.detach(elements);

###	参数:

1. elements - (*mixed*) 要去除提示信息框的元素, 元素集合, 或是一个CSS选择器

###	返回值:

* (*object*) Tips实例

### 示例:

	myTips.detach('a.thisisatip');


提示信息框的HTML结构 {#Tips:HTML}
--------------------------------

	<div class="options.className"> //创建Tips实例时指定的className可选项将作用于该元素
		<div class="tip-top"></div> //自定义样式美化用
		
		<div class="tip">
			
			<div class="tip-title"></div>
			
			<div class="tip-text"></div>
			
		</div>
		
		<div class="tip-bottom"></div> //自定义样式美化用
	</div>


Tips结合元素存储机制的使用 {#Tips:Storage}
---------------------------------

可以通过[Element Storage](/Element/Element/#ElementStorage)来指定提示信息的标题和正文

### 示例:

#### HTML:

	<a id="tip1" href="http://mootools.net" title="mootools homepage" class="thisisatooltip" />

#### JavaScript
	
	$('tip1').store('tip:title', 'custom title for tip 1');	//提示信息的标题变成: custom title for tip 1
	$('tip1').store('tip:text', 'custom text for tip 1');	//提示信息的正文变成: custom text for tip 1
	
### 备注:

当使用这种方式时, 可以使用元素对象或HTML片段来作为提示信息的标题和正文.

[Events]: /Class/Class.Extras#Events
[Options]: /Class/Class.Extras#Options