新版本1.4.2发布了。第一次升级到 1.4.x 版本请注意在1.4.0版本的重大变动,具体请阅读更新日志

设计规范

开发者文档

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

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。否则会因为元素塌陷使定位出错。

  1. <ul class="example">
  2. <li><a href="#" data-placement="top" data-toggle="tooltip" title="浮出在<b>top</b>的tooltip">看top</a></li>
  3. <li><a href="#" data-placement="right" data-toggle="tooltip" title="浮出在<b>right</b>的tooltip">看right</a></li>
  4. <li><a href="#" data-placement="bottom" data-toggle="tooltip" title="浮出在<b>bottom</b>的tooltip">看bottom</a></li>
  5. <li><a href="#" data-placement="left" data-toggle="tooltip" title="浮出在<b>left</b>的tooltip">看left</a></li>
  6. <li><a href="#" data-placement="bottom" data-toggle="tooltip" title="浮出在<b>bottom</b>的tooltip">看bottom</a></li>
  7. </ul>
  8. <ul class="example">
  9. <li><a href="javascript:void(0)" data-trigger="click" data-toggle="tooltip" data-placement="top" data-widthlimit="500px" title="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<pre>widthlimit:&quot;500px&quot;</pre>">widthlimit:'500px'</a></li>
  10. <li><a href="javascript:void(0)" data-trigger="click" data-toggle="tooltip" data-placement="bottom" data-widthlimit="false" title="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<pre>widthlimit:false</pre>">widthlimit:'false'</a></li>
  11. <li><a href="javascript:void(0)" data-trigger="click" data-toggle="tooltip" data-placement="bottom" data-widthlimit="true" title="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<pre>widthlimit:true</pre>">widthlimit:'true'</a></li>
  12. </ul>
  13. <ul class="example">
  14. <li><a href="javascript:void(0)" data-placement="top" data-toggle="tooltip" data-type="attention" title="强调tooltip">top opt.type = 'attention'</a></li>
  15. <li><a href="javascript:void(0)" data-placement="right" data-toggle="tooltip" data-type="attention" title="强调tooltip">right opt.type = 'attention'</a></li>
  16. <li><a href="javascript:void(0)" data-placement="bottom" data-toggle="tooltip" data-type="attention" title="强调tooltip">bottom opt.type = 'attention'</a></li>
  17. <li><a href="javascript:void(0)" data-placement="left" data-toggle="tooltip" data-type="attention" title="强调tooltip">left opt.type = 'attention'</a></li>
  18. <li><a href="javascript:void(0)" data-placement="bottom" data-toggle="tooltip" data-type="attention" title="强调tooltip">bottom opt.type = 'attention'</a></li>
  19. </ul>
  20. <h3>对齐方式:</h3>
  21. <ul class="example">
  22. <li><a style="display:inline-block;width:120px;height:100px;background: #ccc" href="javascript:void(0)" data-placement="top" data-trigger="hover" data-toggle="tooltip" data-align="left" title="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa">opt.align='left'</a></li>
  23. <li><a style="display:inline-block;width:120px;height:100px;background: #ccc" href="javascript:void(0)" data-placement="right" data-trigger="hover" data-toggle="tooltip" data-align="bottom" title="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa">opt.align='bottom'</a></li>
  24. <li><a style="display:inline-block;width:120px;height:100px;background: #ccc" href="javascript:void(0)" data-placement="bottom" data-trigger="hover" data-toggle="tooltip" data-align="right" title="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa">opt.align='right'</a></li>
  25. <li><a style="display:inline-block;width:120px;height:100px;background: #ccc" href="javascript:void(0)" data-placement="left" data-trigger="hover" data-toggle="tooltip" data-align="top" title="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa">opt.align='top'</a></li>
  26. <li><a style="display:inline-block;width:120px;height:100px;background: #ccc" href="javascript:void(0)" data-placement="bottom" data-trigger="hover" data-toggle="tooltip" data-align="center" title="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa">opt.align='center'</a></li>
  27. </ul>

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

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"

  1. <ul class="example">
  2. <li><a id="J_set" href="javascript:void(0)" data-toggle="tooltip" data-trigger="click" title="" data-original-title="这里可以做一些setting类别的事务<br><input type=&quot;text&quot;>">带确定取消按钮的tooltip </a></li>
  3. </ul>
  4. <script>
  5. $('#J_set').tooltip({
  6. animation: false,
  7. type: 'confirm',
  8. okHide: function(){alert('okHide');console.log(this);this.tooltip('hide')},
  9. hide: function(){console.log(this)}
  10. })
  11. </script>

使用SUI可以轻松搭建一个漂亮的页面,她有丰富的组件库可以像搭积木一样轻松搭建一个页面。
  1. <div style="width:300px" class="tooltip-only-arrow default bottom">
  2. <div class="tooltip-arrow">
  3. <div class="tooltip-arrow cover"></div>
  4. </div>
  5. <div class="tooltip-inner">使用SUI可以轻松搭建一个漂亮的页面,她有丰富的组件库可以像搭积木一样轻松搭建一个页面。</div>
  6. </div>

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

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