javascript - 如何使用不同的工具提示插件模仿 Leaflet.Draw 工具提示样式？

Question

我正在尝试在也使用leaflet.draw 的地图上实现类似leaflet.draw 的行为（使用Draw 来放置标记，然后使用自定义js 来绘制路线）。因此，我希望这个自定义绘图功能的有用工具提示看起来像绘图工具提示。

我该怎么做？我目前正在使用 jquery-ui v. 1.11.4，但我无法确定外观是否相同。我从 Leaflet.draw 中找到了css 的相关部分，但是当尝试按照下面（从这里）在构造函数中使用tooltipclass 属性时，两个 leaflet.draw 类被添加到工具提示中（并且显然被现有的 jquery 覆盖-ui 类）。

$( ".selector" ).tooltip({
  tooltipClass: ".leaflet-draw-tooltip .leaflet-draw-tooltip-single"
});

似乎有两种可能的解决方案：
1. 创建我自己的leaflet.draw 工具提示
实例 2. 找到一种方法从 jquery-ui 工具提示中删除冲突的 CSS 类。

Answer 1

所以问题是leaflet.draw.css包含以下属性：

visibility: hidden ;

因此，每当我成功地将leaflet.draw CSS 应用到工具提示时，它就会消失！（有点难以调试）。

所以我创建了一个类来覆盖该visibility属性并将其添加到工具提示声明中：

.j-leaflet-draw-tooltip{
    visibility: visible;
}

$( "#map" ).tooltip({
    tooltipClass: "leaflet-draw-tooltip leaflet-draw-tooltip-single
                   j-leaflet-draw-tooltip"
});