直接上代码：(Talk is cheap. Show me the code)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="bootstrap.min.css"/>
<style>
.wxz_overflow{
/*固定套路4条*/
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/*根据实际项目，设置合适的宽度*/
width: 100px;
}
</style>
</head>
<body>
<table class="table table-striped table-hover">
<tr>
<td><div class="wxz_overflow" title="<h2 style='color:#f00'>测试文本测试文本测试文本测试文本<h2>" data-placement="auto" data-html="true">测试文本测试文本测试文本测试文本</div></td>
<td><div class="wxz_overflow" title="测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本" data-placement="auto">测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</div></td>
<td><div class="wxz_overflow" title="测试文本" data-placement="auto">测试文本</div></td>
</tr>
<tr>
<td>测试文本测试文本测试文本测试文本</td>
<td>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</td>
<td>测试文本测试文本测试</td>
</tr>
<tr>
<td>测试文本测试文本测试文本测试文本</td>
<td>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</td>
<td>测试文本测试文本测试</td>
</tr>
</table>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script>
$(".wxz_overflow").hover(function() {
if(this.scrollWidth > this.offsetWidth ) { //当内容宽度 > 容器宽度时
//tooltip和popover都可以使用hover的方式触发，都可以通过加上data-html="true"来自定义样式
// $(this).popover('toggle');
$(this).tooltip('toggle');
}
});
</script>
</body>
</html>