dom鼠标图例展示

1.定义一个div

<div id="tooltip" style="display:none; position:absolute;">
    展示信息
</div>

2.js

// 鼠标移入
document.addEventListener('mousemove', function(event) {
    var tooltip = document.getElementById('tooltip');
    tooltip.style.left = event.clientX + 10 + 'px'; // x
    tooltip.style.top = event.clientY + 10 + 'px'; // y
    tooltip.style.display = 'block';
});

// 鼠标离开隐藏提示框
document.addEventListener('mouseleave', function() {
    var tooltip = document.getElementById('tooltip');
    tooltip.style.display = 'none';
});

3.css

#tooltip {
    background-color: #333;
    color: white;
    padding: 10px;
    border-radius: 5px;
    z-index: 1000;
}

该方法需要有特定的触发对象才可使用，例如鼠标移动到文本上时激活mousemove，此文档用于gis开发时缺少图例功能所创