kissyteam/kissy-gallery — pull request #138 by neekey (2013-03-27 04:34:03+00:00)
Title: Tooltip组件

特点：

1、轻量，只提供`tooltip`节点到`trigger`的事件关联和`tooltip`的位置计算，不涉及tooltip样式构造等
2、为`trigger`和`tooltip`间建立事件关联（hover显示，延迟消失等）
3、`tooltip`根据用户的视域情况自动进行显示位置计算
4、显示位置和细节可配置
5、可选的自带`Bubble`样式

使用例子：

### HTML

```html

这是Tooltip

```

### Javascript

```js
![Screen Shot 2013-03-27 at 12 32 52 PM](https://f.cloud.github.com/assets/499870/306811/6d54b742-9697-11e2-9ca2-cd0604e70fa3.png)

// 引入Tooltip，注意bubble.css为可选
KISSY.use('gallery/tooltip/1.0/index, gallery/tooltip/1.0/bubble.css', function(S, Tooltip) {

Tooltip.attach({
trigger: '.J_Trigger', // 用于触发Tooltip出现的节点
refer: '.J_Refer', // 用于Tooltip进行位置计算的节点
tooltip: '.J_Tooltip', // Tooltip节点
// ------------ 以下参数可选 ------------------------------
position: 'right', // 可选：默认情况下，Tooltip会根据当前视域进行位置的计算，但是你也可以通过这个属性来强制Tooltip的显示位置，可用值：top,bottom,right,left
arrowAlign: 'center', // 可选：Tooltip的箭头和refer的位置关系: left,center,right
align: 'center', // 可选：Tooltip主体和refer的位置关系
container: '.container', // 可选：默认Tooltip将插入到body中，可以通过该字段限定容器
arrowHook '.J_TooltipArrow', // 可选：箭头的钩子，默认为.J_TooltipArrow
onHide: function( trigger, tooltip ){ /* do sth */ },
onShow: function( trigger, tooltip ){ /* do sth */ }
});
});
```

### 预览

![Screen Shot 2013-03-27 at 12 32 52 PM](https://f.cloud.github.com/assets/499870/306813/8aa0cfac-9697-11e2-8530-cbf204e7ba13.png)