List - Tooltip效果

<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>