效果图
代码如下
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>卡片效果</title>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.tipbox {
position: absolute;
color: whitesmoke;
font-size: 15px;
padding: 8px 12px;
border-radius: 4px;
background-color: rgba(50, 50, 50, .9);
z-index: 1000;
display: none;
white-space: nowrap;
line-height: 20px;
}
</style>
</head>
<body>
<div class="tipbox"></div>
<div id="tableDiv">
<table class="table table-striped table-hover table-bordered" id="feedList" style="width: 500px;">
<thead>
<tr>
<th width="2%">班组</th>
<th width="2%">机台</th>
<th width="2%">产量</th>
<th width="2%">卸胎</th>
<th width="2%">胎面</th>
<th width="2%">胎侧</th>
<th width="2%">垫胶</th>
<th width="2%">内村</th>
<th width="2%">胎圈</th>
<th width="2%">胎体</th>
</tr>
</thead>
<tbody>
<tr>
<td>乙班</td>
<td>B1#</td>
<td>72</td>
<td>72</td>
<td align="center">
<div title="<b>应为:WTM033050</b></br><b>实为:WTM033050</b></br><b>工装编号:TCCB25027</b></br><b>周转卡编号:W201807291033407284</b></br><b>上料时间:2018-07-29 15:51:40</b></br><b>剩余数量:0</b>" class="glyphicon glyphicon-minus"></div>
</td>
<td align="center">
<div title="<b>应为:WTC000014</b></br><b>实为:WTC000014</b></br><b>工装编号:TCCQ55006</b></br><b>周转卡编号:W201807261210027762</b></br><b>上料时间:2018-07-27 08:09:46</b></br><b>剩余数量:0</b>" class="glyphicon glyphicon-minus"></div>
</td>
<td align="center">
<div title="<b>应为:WDJ000182</b></br><b>实为:WDJ000062</b></br><b>工装编号:TCCQ15071</b></br><b>周转卡编号:W201807271840005799</b></br><b>上料时间:2018-07-29 05:17:12</b></br><b>剩余数量:0</b>" class="glyphicon glyphicon-minus"></div>
</td>
<td align="center">
<div title="<b>应为:WNC033010</b></br><b>实为:WNC033009</b></br><b>工装编号:000045006</b></br><b>周转卡编号:W201807271515224699</b></br><b>上料时间:2018-07-29 05:17:19</b></br><b>剩余数量:0</b>" class="glyphicon glyphicon-minus"></div>
</td>
<td align="center">
<div title="<b>应为:WTQ225019</b></br><b>实为:WTQ225019</b></br><b>工装编号:TCCBO502O</b></br><b>周转卡编号:W201807262025539192</b></br><b>上料时间:2018-07-27 08:10:19</b></br><b>剩余数量:0</b>" class="glyphicon glyphicon-minus"></div>
</td>
<td align="center">
<div title="<b>应为:WTT000066</b></br><b>实为:WTT000070</b></br><b>工装编号:TCGT15019</b></br><b>周转卡编号:W201807271558371987</b></br><b>上料时间:2018-07-29 05:04:27</b></br><b>剩余数量:0</b>" class="glyphicon glyphicon-minus"></div>
</td>
</tr>
<tr>
<td>乙班</td>
<td>B2#</td>
<td>58</td>
<td>58</td>
<td align="center">
<div title="<b>应为:WTM061004</b></br><b>实为:WTM061004</b></br><b>工装编号:TCCB25415</b></br><b>周转卡编号:W201807300327209196</b></br><b>上料时间:2018-07-30 06:37:29</b></br><b>剩余数量:0</b>" class="glyphicon glyphicon-minus"></div>
</td>
<td align="center">
<div title="<b>应为:WTC000128</b></br><b>实为:WTC000128</b></br><b>工装编号:TCCQ55028</b></br><b>周转卡编号:W201807281525270400</b></br><b>上料时间:2018-07-30 08:05:43</b></br><b>剩余数量:0</b>" class="glyphicon glyphicon-minus"></div>
</td>
<td align="center">
<div title="<b>应为:WDJ000026</b></br><b>实为:WDJ000182</b></br><b>工装编号:TCCQ15078</b></br><b>周转卡编号:W201807260932331515</b></br><b>上料时间:2018-07-26 12:47:31</b></br><b>剩余数量:0</b>" class="glyphicon glyphicon-minus"></div>
</td>
<td align="center">
<div title="<b>应为:WNC061001</b></br><b>实为:WNC033010</b></br><b>工装编号:000040078</b></br><b>周转卡编号:W201807260614364432</b></br><b>上料时间:2018-07-26 12:43:51</b></br><b>剩余数量:0</b>" class="glyphicon glyphicon-minus"></div>
</td>
<td align="center">
<div title="<b>应为:WTQ225080</b></br><b>实为:WTQ225080</b></br><b>工装编号:TCCY25032</b></br><b>周转卡编号:W201807292339598012</b></br><b>上料时间:2018-07-30 08:06:07</b></br><b>剩余数量:14</b>" class="glyphicon glyphicon-ok" style="color:#00ff00"></div>
</td>
<td align="center">
<div title="<b>应为:WTT000423</b></br><b>实为:WTT000423</b></br><b>工装编号:000000168</b></br><b>周转卡编号:W201807291834123394</b></br><b>上料时间:2018-07-30 12:51:06</b></br><b>剩余数量:29.325</b>" class="glyphicon glyphicon-ok" style="color:#00ff00"></div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- Javascript Libraries -->
<!-- jQuery -->
<script src="js/jquery.min.js"></script>
<script src="js/title.js"></script>
</body>
</html>js文件
$(function() {
$('#tableDiv').bind('mouseover mouseout mousemove', function(event) {
if(event.originalEvent.type == 'mouseover') {
if(event.target.title && event.target.title.length > 0) {
$('.tipbox').css('display', 'block');
$('.tipbox').html(event.target.title);
event.target.title = '';
}
} else if(event.originalEvent.type == 'mouseout') {
if($('.tipbox').html() && $('.tipbox').html().length > 0) {
event.target.title = $('.tipbox').html();
$('.tipbox').html('');
$('.tipbox').css('display', 'none');
}
} else if(event.originalEvent.type == 'mousemove') {
var width = $('.tipbox').width();
if((width + event.pageX) > $(window).width()) {
$('.tipbox').css({
top: event.pageY + 10,
left: event.pageX + 10 - width
})
} else {
$('.tipbox').css({
top: event.pageY + 10,
left: event.pageX + 10
})
}
}
})
})