Tooltip

设计规范

开发者文档

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

1.快速上手

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

            

原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'|'inverse'|'attention'|'confirm' ,区别见demo
  , placement: 'top'
  , selector: false  //通常要配合调用方法使用,如果tooltip元素很多,用此途径进行事件委托减少事件监听数量: $('body').tooltip({selector: '.tips'})
  , trigger: 'hover focus'   //触发方式,多选:click hover focus,如果希望手动触发,则传入'manual'
  , title: 'it is default title'  //默认tooltip的内容,如果给html元素添加了title属性则使用该html属性替代此属性。 
  , 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)。
  , widthlimit: true  // {Boolean|string} tooltip元素最大宽度限制,false不限宽,true限宽300px,也可传入"500px",人工限制宽度
  , okHide: fn       //带确认、取消按钮的tooltip,点击确认时的回调。执行 this.hide() 可以关闭对应tooltip
}

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

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


调用的tooltip,同时也可接收htmldata-*属性参数,二者mix后作为最终方法参数

            

使用SUI可以轻松搭建一个漂亮的页面,她有丰富的组件库可以像搭积木一样轻松搭建一个页面。

            

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

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

comments powered byDisqus