*{
margin: 0;
padding: 0;
}
a {
margin:50px;
/*display: block;*/
}
#box {
width: 300px;
background: #eee;
border: 1px solid #000;
position: absolute;
padding: 10px;
display: none;
line-height: 30px;
}
#img {
height: 269px;
width: 358px;
position: absolute;
border: 1px solid #000;
display: none;
}
<a href="#" class="text" title="append()在被选元素的结尾插入指定内容
// append(function(index,html){return html})在函数指定的元素结尾插入内容 ，index当前元素的位置，html当前选择器的html内容">提示文字效果</a>
//jq
var x = 15;
var y = 15;
$(function() {
$("a").mouseover(function(e) {
this.myTitle = this.title;//保存获取当前元素a属性title的值
this.title = "";//清空默认的title值
var oDiv = "<div id='box'>" +this.myTitle + "</div>";
$("body").append(oDiv);
$("#box").css({
"left": e.pageX + x + "px",
"top": e.pageY + y + "px"
}).show("fast");//slow normal fast 显示速度快慢的值
}).mouseout(function() {
this.title = this.myTitle;//移出后为title在赋值
$("#box").remove();
}).mousemove(function(e) {
var X = e.pageX + x;
var Y = e.pageY + y;
$("#box").css({
"left": X + "px",
"top": Y + "px"
});
});
});
var oA = document.getElementsByTagName("a")[0];
console.log(oA)
console.log(oA.getAttribute("title"))
console.log(oA.attributes)//获取收的属性
var oDiv = document.createElement("div");
oDiv.setAttribute("id", "box"); //设置属性
oDiv.innerHTML = oA.getAttribute("title"); //获取属性值
console.log(oDiv)
document.getElementsByTagName("body")[0].appendChild(oDiv);
var d = document.getElementById("box");
var x = 20;
var y = 20;
oA.onmouseover = function(e) {
oA.setAttribute("title", "");//属性值为空
d.style.display = "block";
document.onmousemove = function(e) {
console.log(e.clientX);
console.log(e.clientY);
d.style.left = e.clientX + x + "px";
d.style.top = e.clientY + y + "px";
};
};
oA.onmouseout = function() {
d.style.display = "none";
};
注意：移动到文字上取消默认的提示信息，
移入时，保持this.tilte = this.myTitle；移出后在移入时在把this.myTilte赋给this.title.这样就可以做到取消默认提示。获取鼠标坐标的方法pageX，pageY；
