The html code is as follows:
<!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>
The css code is as follows:
.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 code is as follows:
$( function () { var $div= $('body' ); // the on method is bound to the parent element $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', ''); } }); })
The effect diagram is as follows:
