tooltip

下载psd文件

文档写的渣，有任何疑惑可以直接留言或者联系@半边

1.快速上手

<a href="#" data-toggle="tooltip" title="first tooltip">hover over me</a>   一行js都不用写，参数写成data-xxx属性即可

如果触发节点的所有祖先元素中存在同时满足下面2个条件的祖先元素:
1.他宽度/高度小于tip元素的宽度/高度。
2.他是absolute/fixed定位方式。
那么需要你在CSS中为该.sui-tooltip指定width/height。否则会因为元素塌陷使定位出错。

对齐方式：

原bootstrap tooltip的参数template已废弃

可以通过data属性或JavaScript传递参数。绝大部分参数可写在触发元素的data-xxx属性里,在触发元素上设置data-toggle="tooltip"（类似dialog）即可。

扩展则可继续添加data-xxx属性注入参数实现。有一个例外，tooltip的内容参数title不需要加data-前缀，它是html标准属性。

$eles.tooltip(options)

对一组页面元素绑定一个工具提示处理器。

$eles.tooltip('show')

弹出某个页面元素的工具提示。

$('#element').tooltip('show')

$eles.tooltip('toggle')

打开或隐藏某个页面元素的工具提示。

$('#element').tooltip('toggle')

$eles.tooltip('destroy')

隐藏并销毁某个页面元素的工具提示。

$('#element').tooltip('destroy')

下方参数值为默认值,每个参数用作data-**的html属性也可。

{
    animation: true  //是否以动画效果淡入淡出tooltip
, type: 'default'   //tip 类型 {string} 'default'|'attention'|'confirm' ,区别见demo
  , placement: 'top'
  , selector: false  //通常要配合调用方法使用，如果tooltip元素很多，用此途径进行事件委托减少事件监听数量: $('body').tooltip({selector: '.tips'})
  , trigger: 'hover focus'   //触发方式，多选：click hover focus，如果希望手动触发，则传入'manual'
  , title: 'xxx'  //{string | function} tooltip的内容，如果给html元素添加了title属性则使用该html属性替代此属性。js调用生成的方式可以传入一个函数，返回值即title。 
  , delay: 0   //如果只传number，则show、hide时都会使用这个延时，若想差异化则传入形如{show:400, hide: 600} 的对象   注：delay参数对manual触发方式的tooltip无效
  , html: true  //决定是html()还是text()
  , container: false  //将tooltip与输入框组一同使用时，为了避免不必要的影响，需要设置container.他用来将tooltip的dom节点插入到container指定的元素内的最后，可理解为 container.append(tooltipDom)。
  , width: '100px'|'100%'  // {string} tip元素的宽度，默认根据内容宽度决定，可人工设置。人工设置宽度，则忽略最大宽度限制
  , widthlimit: true  // {Boolean|string} tooltip元素最大宽度限制，false不限宽，true限宽300px，也可传入"500px",人工限制宽度
  , align: 'center'  // {string} tip元素的布局方式，默认居中：'center' ,'left','right','top','bottom'
  , okHide: fn       //带确认、取消按钮的tooltip，点击确认时的回调。需要关闭tooltip则执行 $(this).tooltip('hide')
  , hide: fn       //tooltip以任何原因关闭消失时的回调,若有渐隐动画，则在动画执行前调用。
}

tooltip作为展示型便携组件本不需要事件，不过为了补充confirm类型的tooltip，目前提供一个常见事件:

okHide 带确认、取消按钮的confirm型tooltip，点击确认时的回调。执行 this.hide() 可以关闭对应tooltip)

通过js调用生成的tooltip，同时也可接收htmldata-*属性参数，二者mix后作为最终方法参数。

因为可以通过$('#xxx').tooltip(opt)指定任意元素$('#xxx')为触发元素，所以不要z再为触发元素添加data-toggle="tooltip"的HTML属性。

AGAIN: 通过js调用生成的tooltip一定不要为触发元素附加data-toggle="tooltip"

示例
代码

带确定取消按钮的tooltip

如果不想用tooltip，但若只想要三角效果，对三角父元素用.tooltip-only-arrow和.top(或.bottom/.right/.left)

箭头的位置想自己调整可以根据业务需求修改外层.tooltip-arrow的left样式

设计规范

开发者文档