`
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
<style>
/*div {
float: left;
}*/
*{
font-size: 18px;
}
#spans {
position: absolute;
border: 1px solid #333;
background: #F5F5F5;
padding: 1px;
color: #333;
display: none;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<span>123aa </span>
<span class="spans" style="display: inline-block; width: 100px;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap" title="111111111111111111111111">11111111111111111111111111111111111111</span>
</div>
<div class="col-md-4">
<span>123aa </span>
<span class="spans" style="display: inline-block;width: 100px;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap" title="111111111111111111111111111111111">1111111111111111111111111111111111</span>
</div>
<div class="col-md-4">
<span>123aa</span>
<span class="spans" style="display: inline-block; width: 100px;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap" title="1111111111111111111111111111111111">11111111111111111111111111111</span>
</div>
</div>
</div>
<!--<div>
aaaa<span style="display: inline-block; width: 100px;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap">bbbbbbbbbbbbbbbbbbbbbbbbbbbbb</span>
</div>
<input style="display:none;" />
<script>
$('div').hover(function() {
$('span', this).show()
}, function() {
$('span', this).hide();
})
</script>-->
</body>
<script>
var x = 20;
var y = 10;
var newtitle = '';
$('span.spans').mouseover(function(e) {
newtitle = this.title;
this.title = '';
$('body').append('<div id="spans">' + newtitle + '</div>');
$('#spans').css({
'left': (e.pageX + x + 'px'),
'top': (e.pageY + y + 'px')
}).show();
}).mouseout(function() {
this.title = newtitle;
$('#spans').remove();
}).mousemove(function(e) {
$('#spans').css({
'left': (e.pageX + x + 'px'),
'top': (e.pageY + y + 'px')
}).show();
})
</script>