bootStrap Table 鼠标悬浮显示详细信息

bootStrap Table 鼠标悬浮显示详细信息

• bootStrap Table 单元格内容较多时，显示会不完整 如下图：
  

---

• 故有鼠标悬浮显示详细内容的需求
• 难点：bootStrap Table 被封装不好修改样式 写鼠标悬浮事件 离开事件太麻烦了
• 要求的效果如下：
  

---

直接上代码：

	function load(data) {
    $('#exampleTable')
        .bootstrapTable(
            {
                // method : 'get', // 服务器数据的请求方式 get or post
                // url : prefix + "/list", // 服务器数据的加载地址
                iconSize: 'outline',
                toolbar: '#exampleToolbar',
                striped: true, // 设置为true会有隔行变色效果
                data: data,
                dataType: "json", // 服务器返回的数据类型
                pagination: true, // 设置为true会在底部显示分页条
                singleSelect: false, // 设置为true将禁止多选
                pageSize: 4, // 如果设置了分页，每页数据条数
                pageNumber: 1, // 如果设置了分布，首页页码
                search: true, // 是否显示搜索框
                showColumns: false, // 是否显示内容下拉框（选择显示的列）
                sidePagination: "client", // 设置在哪里进行分页，可选值为"client" 或者 "server"
                columns: [
                   
                    {
                        field: 'code',
                        title: '数据项编码',
                        cellStyle:formatTableUnit,
                        formatter:paramsMatter
                    },
                    {
                        field: 'name',
                        title: '数据项名称',
                        cellStyle:formatTableUnit,
                        formatter:paramsMatter
                    },
               
                        field: 'descInfo',
                        title: '描述',
                        width: '150px',
                        cellStyle:formatTableUnit,
                        formatter:paramsMatter
                    },
                    {
                        title: '操作',
                        field: 'fieldId',
                        width: '110px',
                        align: 'center',
                    }]
            });
};

function paramsMatter(value,row,index) {
    var span=document.createElement('span');
    span.setAttribute('title',value);
    span.innerHTML = value;
    return span.outerHTML;
}

function formatTableUnit(value, row, index) {
    return {
    css: {
        "white-space": 'nowrap',
        "text-overflow": 'ellipsis',
        "overflow": 'hidden'
    }
}
}

• O拉