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

Question

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

我该怎么做？我目前使用的是 jquery-ui v. 1.11.4，但我想不出要使外观相同。我发现 relevant section of css from leaflet.draw, but when attempting to use the tooltipclass property in the constructor as per below (from here)，两个 leaflet.draw class 被添加到工具提示中（显然被现有的 jquery-ui class 覆盖了).

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

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

Answer 1

所以问题是 leaflet.draw.css 包含以下内容属性:

visibility: hidden ;

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

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

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

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

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

How can I mimic Leaflet.Draw tooltip style with a different tooltip plugin?

javascript

css

jquery-ui

tooltip

leaflet.draw