一. 描述等长文本的显示与隐藏
有的时候，从数据库中查询出来的某些字段，如描述，简介等，文本可能会比较长。如果全显示在table 页面上，可能会使宽度变宽，有滚动条，不美观，可以将其截断后隐藏，如只显示前10个字符，或者是前20个字符，后面跟三个…, 这样可以表示出省略的意思，当把鼠标放置在描述文本上时，会显示出全部。
利用的是Bootstrap 的插件tooltips 即工具提示。
二. tooltips 的使用
只需要在本该显示描述长文本的地方，进行处理，返回:
return "<span onmouseover='$(this).tooltip(\"show\");' data-html='true' data-toggle='tooltip' data-placement='left' title='<p>"+value.replace(new RegExp("\n",'g'),'</br>')+"</p>'>"+ value.substr(0,10)+"...</span>";
即可。 其中,value 是描述的全部值。 onmouseover 表示鼠标移动到上面时进行触发。 data-toggle=‘tooltip’ 表示引用这个插件tooltips。 data-placement 来指定方向，有left,top,right,bottom ，auto 等值。 其中，有一个replace 方法，表示如果有换行的话，\n ,就进行换行的处理。
还有一种是退回原因的展示。 审核或者是审批的状态为退回，当悬浮退回状态时，显示退回的原因。
var title=row.return_reason; //其中title为退回原因。 var title=getReason(row.id,row.processnode_code); s="<span class='label label-danger' onmouseover='$(this).tooltip(\"show\");' data-html='true' data-toggle='tooltip' data-placement='top' title='<p>"+title.replace(new RegExp("\n",'g'),'</br>')+"</p>'>退回</span>";
三. tooltips 插件的主要可设置项
以下图片引用于官网:
https://v3.bootcss.com/javascript/#tooltips
四. tooltips 的方法
四.一 展示方法
$('#element').tooltip('show')
四.二 隐藏方法
$('#element').tooltip('hide')
四.三 反转方法
$('#element').tooltip('toggle')
四.四 销毁方法
$('#element').tooltip('destroy')
五.事件
show 为展示的时候，触发的事件。 shown 为展示完成后触发的事件. hide 为隐藏时触发的事件，hidden 为隐藏后触发的事件. inserted 为元素填充到dom后触发的事件。
$('#myTooltip').on('hidden.bs.tooltip', function () { // do something… })
谢谢!!!
