Tooltip组件

特点：

1、轻量，只提供`tooltip`节点到`trigger`的事件关联和`tooltip`的位置计算，不涉及tooltip样式构造等
2、为`trigger`和`tooltip`间建立事件关联（hover显示，延迟消失等）
3、`tooltip`根据用户的视域情况自动进行显示位置计算
4、显示位置和细节可配置
5、可选的自带`Bubble`样式

使用例子：

### HTML

```html
<!-- 下面为tooltip的触发节点，trigger为触发节点，refer为tooltip计算的参考点，两者可以为一个节点 -->
<div class="J_Trigger tooltip-trigger">
    <div class="J_Refer tooltip-refer"></div>
</div>

<!--下面使用组件自带的bubble样式，只要遵循下面的结构，并添加'bubble'和'arrow-*'样式就可以 -->
<div class="bubble J_Tooltip">
    <!-- 箭头，通过arrow-top, arrow-left, arrow-right, arrow-bottom来设置箭头方向 -->
    <span class="J_TooltipArrow arrow-top"><i></i></span>
    <div class="tooltip-content">
        这是Tooltip
    </div>
</div>
```

### 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)