1. 用组件的title属性, 这个是HTML中自带的提示属性, 当鼠标停留在组件上的时候, 就会弹出提示, 比如<div title="小明">name</div>, 当鼠标停留在div上的时候, 就会有一个小黄框, 显示"小明".
2.上面的提示框很不好看, 而且功能很固定, 所以你可以在组建上加一个onmouseover的事件, 记录鼠标的位置, 我写了一个例子, 你看看是不是你需要的:
<script>
var mouseX
var mouseY
function showName() {
var infoDiv = document.getElementById('infoDiv')
infoDiv.innerHTML = 'This is the name!'
infoDiv.style.left = mouseX
infoDiv.style.top = mouseY
infoDiv.style.display = "block"
}
function mouseOver(obj) {
// 此处记录鼠标停留在组建上的时候的位置, 可以自己通过加减常量来控制离鼠标的距离.
mouseX = event.clientX
mouseY = event.clientY
}
</script>
<div onclick="showName()" onmouseover="mouseOver()" >Click here to display name.</div>
<!-- 用来显示名字的DIV, 根据需要可以修改格式和布局 -->
<div id="infoDiv" style="display: noneposition: absolutewidth: 100pxheight: 50pxbackground-color: #F1F19B"></div>
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取鼠标在Canvas中的坐标位置</title>
<style>
#canvas{
border:1px solid #ccc
width:300px
height:300px
overflow:hidden
}
</style>
<script>
function get_canvas(ev,obj){
m_clientX = ev.clientX-obj.offsetLeft
m_clientY = ev.clientY-obj.offsetTop
document.getElementById("tips").innerHTML = "当前坐标：X："+ m_clientX + " ,Y：" +m_clientY
}
</script>
</head>
<body>
<div id="tips"></div>
<div id="canvas" onmousemove="get_canvas(event,this)"></div>
</body>
</html>
兼容IE8+
用 javascript 获取当前页面上鼠标（光标）位置在许多情况下都会用到，比如拖放，悬停提示（tooltip） 等等。当然，这里我们依然要面对浏览器的兼容问题，在不同的浏览器下，对这些相关的属性处理方式也不同。
参考资料
首页 → 网络编程 → JavaScript → javascript技巧 → js获取鼠标位置实例详解.脚本之家[引用时间2018-1-18]
