layui数据表格数据超出宽度展示...，鼠标hover展示全部

layui.use([ 'table'], function () {
	var table = layui.table;
	var agreementData= []
	var agreementData= new Array()
	agreementData= [
		{
	       "id":5,
	        "agreement_code":"XJYD-usmile-20211018002-BC002",
	        "sell_uid":10,
	        "sell_name":"（测试）****有效公司",
	        "top_id":12,
	        "top_c_code":"20221106",
	        "brand":"品牌",
	        "business_type":1,
	        "title":"测试标题",
	        "num":5,
	        "effective_start_date":"2021-10-19",
	        "effective_end_date":"2022-10-18",
	        "seal_type":1,
	        "seal_category":1,
	        "fixed_amount":1,
	        "contact_amount":100,
	        "contact_desc":"范德萨发顺丰大师傅",
	        "status":5,
	        "close_reason":"dfasdf",
	        "is_del":0,
	        "create_user_id":541,
	        "create_dep_id":210,
	        "create_time":1667530910,
	        "update_time":1668591117,
	        "create_user_id_str":"创建人姓名",
	        "create_dep_id_str":"运营支持中心_IT数字化_研发组_代码开发",
	        "create_time_str":"2022-11-04 11:01:50",
	        "status_str":"已撤回",
	        "cancel_approval_btn":0,
	        "approval_id":0
	    },
	]
	var insTb = table.render({
        elem: '#table-list',
        data: agreementData,
        //toolbar: '#toolbar',
        defaultToolbar:[],
        skin:'line',
        page: true,
        cols: [[
            {field: 'agreement_code', width:10 +'%', title: '协议编号',
              templet: function(d){
                return `<a style="color: #1E55E6;" οnclick="showInfo(${d.status},${d.id})"><div class="tableColShow">${d.agreement_code}</div></a>`;
              }
            },
            {field: 'status_str', width:5 +'%',  title: '状态'},
            {field: 'sell_name', width:15 +'%',  title: '所属客户',
              templet: function(d){
                return '<a><div class="tableColShow">'+d.sell_name+'</div></a>';
              }
            },
            {field: 'top_c_code', width:10 +'%', title: '原合同编号',
              templet: function(d){
                return '<a style="color: #1E55E6;" href="{:url(\'admin/SellerContract/showContractView\')}?s_c_id='+d.top_id+'" ><div class="tableColShow">'+d.top_c_code+'</div></a>';
              }
            },
            {field: 'create_user_id_str', width:6 +'%', title: '创建人',
              templet: function(d){
                return '<a><div class="tableColShow">'+d.create_user_id_str+'</div></a>';
              }
            },
            {field: 'create_dep_id_str', width:10 +'%', title: '创建人部门',
              templet: function(d){
                return '<a><div class="tableColShow">'+d.create_dep_id_str+'</div></a>';
              }
            },
            {field: 'create_time_str', width:8 +'%', title: '创建时间',
              templet: function(d){
                return '<a><div class="tableColShow">'+d.create_time_str+'</div></a>';
              }
            },
            {field: 'opera',width:15 +'%', align: 'center', title: '操作',
              templet: function(d){
                return actionBar(d.status,d.id,d.cancel_approval_btn,d.approval_id);
              }
            }
        ]]
        , done: function () {
            layer.closeAll('loading');
        },
    });
    
    var tipsVal;
    $('body').on('mouseover','.tableColShow', function () {
         var ovText = $(this).text();
         if(ovText.length < 10){
             return;
         }
         var html = "<p style='word-wrap:break-word;width: 150px;'>" + ovText + "</p>";
         tipsVal=layer.tips(html,this,{tips:[1,"rgb(58, 61, 73)"]});
    });
     //鼠标移出
    $('body').on('mouseout','.tableColShow', function () {
         layer.close(tipsVal);
    })
})