Bootstrap - Table表格内容及tooltip实现鼠标悬停悬浮显示信息

1.【Table】悬浮显示

效果图

代码

function load(data) {
   $('#exampleTable').bootstrapTable({
		...
        columns: [
            {
                field: 'name',
                title: 'tile',
                cellStyle:formatTableUnit,
                formatter:paramsMatter
            },
       
                field: 'descInfo',
                title: '描述',
                width: '150px',
                cellStyle:formatTableUnit,
                formatter:paramsMatter
            },
			...
    });
};

function paramsMatter(value,row,index) {
    var span=document.createElement('span');
    span.setAttribute('title',row.description);
    span.innerHTML = '+ row.id + '/" target="_blank">' + row.title + '';
    return span.outerHTML
}

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

2.【tooltip】悬浮显示

效果图

代码

代码很简单，更具业务需求稍作修改即可
html

<span data-toggle="tooltip" data-placement="right" title="此处是提示信息">内容xxx</span>

js

$(function () {
     $('[data-toggle="tooltip"]').tooltip()
 })

更多的需求可以参考：https://www.runoob.com/bootstrap/bootstrap-tooltip-plugin.html

以上就是Bootstrap - Table表格内容及tooltip实现鼠标悬停悬浮显示信息的基本使用，希望对你有帮助！