本文主要是介绍Leaflet开发笔记-Tooltip，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Tooltip图层显示文本。官网API文档地址：https://leafletjs.com/reference-1.5.0.html#tooltip
一些配置参数请查阅官方文档。下面举例项目开发中常用方法。
基本用法：marker.bindTooltip("my tooltip text").openTooltip(); //里面内容可以填写html字符串
打开显示文本：marker.openTooltip()；
关闭显示文本：marker.closeTooltip()；
最常见的场景：如何改变提示文本的样式？
在绑定时，我们可以添加一个属性 【className】
.leaflet-label{
background-color:rgba(0, 0, 0, 0.6);
background-clip: padding-box;
color: #fff;
display: block;
font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
font-weight: bold;
padding: 1px 3px;
position: absolute;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
white-space: nowrap;
z-index: 6;
}
这是效果：（默认是白底黑字，和系统风格不协调，按照美工出图调整的样式）
这里如果你新样式的底色不是白色，你还需要调整一处样式，因为插件自带的提示文本的小三角是白色的。所以你还要打开leaflet.css文件 查看 .leaflet-tooltip-top:before，.leaflet-tooltip-bottom:before，.leaflet-tooltip-left:before，.leaflet-tooltip-right:before 有四个小三角都要调整。
这篇关于Leaflet开发笔记-Tooltip的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
