按钮添加悬浮提示
- 代码效果
样例代码
<style> /*鼠标悬停样式*/ .tooltip-inner { font-size:14px; } </style> <script type="text/javascript"> $(function () { var btnValue="action_0";//要增加悬停效果的按钮 var hoverText="悬停文字";//悬停文字 var position='right';//悬停位置:top | left | right | bottom var btns=$("button[value="+btnValue+"]"); setTimeout(function(){ $.each(btns,function(){ $(this).attr('title',hoverText); $(this).attr('data-placement',position); $(this).tooltip(); }); },500); }); </script>
列表添加悬浮提示
- 代码效果
<style> /*鼠标悬停样式*/ .tooltip-inner { font-size:14px; text-align:left; max-width:inherit; width:500px; } </style> <script type="text/javascript"> $(function () { var hoverText="悬停文字";//悬停文字默认值 var hoverTextSource=['field2','field3','field4','field6'];//悬停文字来源列(如果为空则取默认值) var position='right';//悬停位置:top | left | right | bottom var columnName="field1";//要增加悬停效果的列名 var columns=$(".dataList td.column_"+columnName); setTimeout(function(){ $.each(columns,function(){ if(hoverTextSource.length>0){ hoverText=""; for(var i=0;i<hoverTextSource.length;i++){ var source=hoverTextSource[i]; var sourceHtml=$(this).parent().find("td.column_"+source).html(); var sourceLable=$(this).parent().parent().parent().find("th.column_"+source).text(); hoverText+=(hoverText==""?"":"<br>")+sourceLable+": "+sourceHtml; } } $(this).attr('title',hoverText); $(this).attr('data-placement',position); $(this).tooltip({container: 'body',html:true}); }); },500); }); </script>
joget是先加载jquery的tooltip再加载bootstrap的tooltip,两者语法一样,照理应该加载的是后边的bootstrap,可能网络延时问题,导致有时会使用jquery的tooltip,所以要用setTimeout来延时处理