核心提示：如何快速提示title的内容？!DOCTYPE htmlhtmlheadmeta charset=utf-8titledemo(快速提示title的内容)/titlescript src=https:...
如何快速提示title的内容？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo(快速提示title的内容)</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<style>
*{margin: 0;padding: 0;border:0;}
body {
font-family: "Microsoft YaHei", Helvetica, arial, freesans, clean, sans-serif !important;
font-size: 12px;
line-height: 1.62;
color: #333;
height:100%;
_height:100%;
width:100%;
min-width: 1200px;
background:#fff;
font-weight:normal;
font-style:normal;
}
a,a * { cursor:pointer;background: #ccc;}
.dd{
width: 200px;border: 2px dotted #666;height: 200px;background: #ccc;text-align: center;line-height: 200px;margin: 0 auto;border-radius: 5%;
}
#tooltip{
position:absolute;
border:1px solid #666;
background:#ccc;
color:black;
width:100px;
padding: 2px;
font-size: 12px;
line-height: 20px;
max-height:100px;
border-radius: 5px;
overflow: hidden;
}
</style>
<script type="text/javascript">
$(function(){
//var x = y = 20;//设定x=y=20的目的是防止鼠标移动误出发e.pageY+y,e.pageX+x
$("[title]").mouseover(function(e){
this.myTitle = this.title;
this.title = ""; //消除自身title的影响
var tooltip = "<p id='tooltip'>查看: "+ this.myTitle +"</p>"; //创建 p 元素 文字提示
$(".tooltip").append(tooltip); //把它追加到文档中 $(".tooltip")可以改成$(this)
$("#tooltip")
.css({
"top": (e.pageY+20) + "px",
"left": (e.pageX+20) + "px"
}); //设置x坐标和y坐标
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+20) + "px",
"left": (e.pageX+20) + "px"
});
});
})
</script>
</head>
<body>
<p class="dd"><a href="javascript：;" class="tooltip" title="快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示快速提示">快速 提示</a></p><!-- -->
</body>
</html>
