设计规范

开发者文档
文档写的渣,有任何疑惑可以直接留言或者联系@半边
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。否则会因为元素塌陷使定位出错。
- <ul class="example">
- <li><a href="#" data-placement="top" data-toggle="tooltip" title="浮出在<b>top</b>的tooltip">看top</a></li>
- <li><a href="#" data-placement="right" data-toggle="tooltip" title="浮出在<b>right</b>的tooltip">看right</a></li>
- <li><a href="#" data-placement="bottom" data-toggle="tooltip" title="浮出在<b>bottom</b>的tooltip">看bottom</a></li>
- <li><a href="#" data-placement="left" data-toggle="tooltip" title="浮出在<b>left</b>的tooltip">看left</a></li>
- <li><a href="#" data-placement="bottom" data-toggle="tooltip" title="浮出在<b>bottom</b>的tooltip">看bottom</a></li>
- </ul>
- <ul class="example">
- <li><a href="javascript:void(0)" data-trigger="click" data-toggle="tooltip" data-placement="top" data-widthlimit="500px" title="aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<pre>widthlimit:"500px"</pre>">widthlimit:'500px'</a></li>
- <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>
- <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>
- </ul>
- <ul class="example">
- <li><a href="javascript:void(0)" data-placement="top" data-toggle="tooltip" data-type="attention" title="强调tooltip">top opt.type = 'attention'</a></li>
- <li><a href="javascript:void(0)" data-placement="right" data-toggle="tooltip" data-type="attention" title="强调tooltip">right opt.type = 'attention'</a></li>
- <li><a href="javascript:void(0)" data-placement="bottom" data-toggle="tooltip" data-type="attention" title="强调tooltip">bottom opt.type = 'attention'</a></li>
- <li><a href="javascript:void(0)" data-placement="left" data-toggle="tooltip" data-type="attention" title="强调tooltip">left opt.type = 'attention'</a></li>
- <li><a href="javascript:void(0)" data-placement="bottom" data-toggle="tooltip" data-type="attention" title="强调tooltip">bottom opt.type = 'attention'</a></li>
- </ul>
- <h3>对齐方式:</h3>
- <ul class="example">
- <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>
- <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>
- <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>
- <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>
- <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>
- </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')
- {
- 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"
- <ul class="example">
- <li><a id="J_set" href="javascript:void(0)" data-toggle="tooltip" data-trigger="click" title="" data-original-title="这里可以做一些setting类别的事务<br><input type="text">">带确定取消按钮的tooltip </a></li>
- </ul>
- <script>
- $('#J_set').tooltip({
- animation: false,
- type: 'confirm',
- okHide: function(){alert('okHide');console.log(this);this.tooltip('hide')},
- hide: function(){console.log(this)}
- })
- </script>
- <div style="width:300px" class="tooltip-only-arrow default bottom">
- <div class="tooltip-arrow">
- <div class="tooltip-arrow cover"></div>
- </div>
- <div class="tooltip-inner">使用SUI可以轻松搭建一个漂亮的页面,她有丰富的组件库可以像搭积木一样轻松搭建一个页面。</div>
- </div>
如果不想用tooltip,但若只想要三角效果,对三角父元素用.tooltip-only-arrow
和.top(或.bottom/.right/.left)
箭头的位置想自己调整可以根据业务需求修改外层.tooltip-arrow
的left样式