首页 / OpenLayers / 使用示例
控件按钮提示文本
改写缩放按钮的 title 与 aria-label，再挂一层自定义悬浮提示，鼠标停靠与键盘聚焦都能看到说明。
源码与运行效果
说明
默认控件的按钮会带上英文 title，改成中文只需要查到底层 DOM：
document.querySelector('.ol-zoom-in') 取到按钮后，
同时设置 title 与 aria-label，
鼠标悬停和读屏软件都能获得正确描述。
浏览器原生 title 有 1 秒左右的延迟，示例额外挂了一个跟随指针的提示框，
mouseenter、mousemove 时更新位置，
focus 时贴着按钮显示，兼顾键盘用户。
| 操作 | 结果 |
|---|---|
| 鼠标悬停 + 按钮 | 立即出现中文提示，随后才出现原生 title |
| 按 Tab 聚焦按钮 | 提示框贴在按钮上方显示 |
| 移开鼠标或失焦 | 提示框隐藏 |
控件 DOM 在地图首次渲染后才稳定，改写按钮属性要放在 rendercomplete 之后。