html代码如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/SmallCorner.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/SmallCorner.js"></script>
</head>
<body>
<span class="small_corner" title="">22</span><br>
<span class="small_corner" title="">8</span><br>
</body>
</html>
css代码如下：
.small_corner{ width: 18px; height: 12px; line-height: 10px; border-radius: 2px; font-size: 12px; display: block; background-color: #fd3141; color: white; text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
js代码如下：
$(function () { var $div= $('body'); // on方法绑定在父元素上 $div.on('mouseover mouseout', '.small_corner', function(event) { var $title=$(this).text(); var $self=$(this); if (event.type=='mouseover') { $self.attr('title', function() { return $title }); }else if(event.type=='mouseout'){ $self.attr('title', ''); } }); })
效果图如下：
