如何在mapbox-gl-js中的导航控件上显示工具提示？

Question

我正在为非常缺乏经验的用户构建mapbox-gl-js应用程序，并希望尽可能多地提供指导。用于放大/缩小/ gelocate等的标准图标按钮非常棒，但作为额外的帮助，我想在鼠标悬停时显示工具提示，并通过文本说明按钮“放大”，“缩小”，“缩放到当前位置“等

我检查了API文档并查看了github中的源代码，但看不到提供此自定义的选项。如果其他人已经成功完成了这项工作，或者对如何在不设置mapbox的情况下实现这一点提出了一些建议，我将非常感激！

Answer 1

不是最漂亮的解决方案，但由于控件只是常规DOM节点，您只需设置title属性即可。这将在悬停元素时为您提供工具提示：

// Add zoom and rotation controls to the map.
map.addControl(new mapboxgl.NavigationControl());

document.querySelector('.mapboxgl-ctrl-zoom-in').setAttribute('title', 'Zoom In')
document.querySelector('.mapboxgl-ctrl-zoom-out').setAttribute('title', 'Zoom Out')

https://jsfiddle.net/Scarysize/68fpv1kq/1/

从可访问性角度来看，这也很棒。