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

对齐方式：

<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:&quot;500px&quot;</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')

下方参数值为默认值,每个参数用作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

<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=&quot;text&quot;>">带确定取消按钮的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样式