javascript - Leaflet - 设置工具提示的样式

Question

我正在尝试在 Leaflet 中设置工具提示的样式。由于各种变化并试图合并不同的模块，我一直在修复它们的一些问题。

有问题的工具提示需要有白色背景、黑色粗边框、粗体和透明。

我想这会相当容易，而且我已经在 J​​S 和 html 中管理了大部分。但是，无论出于何种原因，我都无法让 CSS 使用它（处理 leaflet.css 文件）。

下面的代码是我目前的主要代码（是的，用蓝色而不是白色 - 用它作为测试）。它是完美的，除了工具提示的其余部分（在 div 之外）是白色而不是黑色：

layer.bindTooltip("<div style='background:blue;'><b>" + area.toFixed(1) + "</b></div>", 
{
    direction: 'right',
    permanent: false,
    sticky: true,
    offset: [10, 0],
    opacity: 0.75,
    backgroundColor: 'black'
});

我尝试了一些我记得的 html 变体，并使用了以下内容：

layer.bindTooltip("<div style='background:blue;'><b>" + area.toFixed(1) + "</b></div>", 
{
    direction: 'right',
    permanent: false,
    sticky: true,
    offset: [10, 0],
    opacity: 0.75,
    className: 'leaflet-tooltip'
});

并将leaflet.css 文件中的leaflet-tooltip 更改为：

.leaflet-tooltip {
    position: absolute;
    padding: 6px;
    background-color: #000;
    border: 1px solid #fff;
    border-radius: 3px;
    color: #222;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

欢迎任何想法。我很想只使用一些简单的html，但如果CSS是可行的（不确定我做错了什么，我每次都会咕噜咕噜地构建我的项目来处理JS，并且还做一个我认为CSS的标准构建）。

编辑 - 添加图片：

编辑 - 意识到我的问题是我仍然链接到在线 css，而不是我自己的。补救。现在尝试在左侧设置“点”的样式，它仍然是白色的：

CSS的代码：

.leaflet-tooltip-own {
position: absolute;
padding: 5px;
background-color: rgba(0, 0, 0, 0.5);
border: 0px solid #000;
border-radius: 4px;
color: #000;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

最终编辑 - 找到，感谢这篇文章。三角形（或“尾巴”）的样式选项位于 .leaflet-tooltip-left:before 和 .leaflet-tooltip-right:before 中。新的 css 代码（仅更改了border-left-color 和border-right-color - 无需对js 进行任何更改，因为这似乎是继承的）：

.leaflet-tooltip-left:before {
right: 0;
margin-right: -12px;
border-left-color: rgba(0, 0, 0, 0.4);
}
.leaflet-tooltip-right:before {
left: 0;
margin-left: -12px;
border-right-color: rgba(0, 0, 0, 0.4);
}
.leaflet-tooltip-own {
position: absolute;
padding: 4px;
background-color: rgba(0, 0, 0, 0.4);
border: 0px solid #000;
color: #000;
white-space: nowrap;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
pointer-events: none;
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

标签： javascripthtmlleaflet

Answer 1

所以，有几个问题。

一，我仍然链接到互联网上的 css，而不是使用我自己的 css。哎呀！

通过 css 进行样式设置时，三角形/尾部有一些问题，可以在 .leaflet-tooltip-left:before 和 leaflet-tooltip-right:before 位中处理。

CSS：

.leaflet-tooltip-left:before {
    right: 0;
    margin-right: -12px;
    border-left-color: rgba(0, 0, 0, 0.4);
}
.leaflet-tooltip-right:before {
    left: 0;
    margin-left: -12px;
    border-right-color: rgba(0, 0, 0, 0.4);
    }
.leaflet-tooltip-own {
    position: absolute;
    padding: 4px;
    background-color: rgba(0, 0, 0, 0.4);
    border: 0px solid #000;
    color: #000;
    white-space: nowrap;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

以及调用工具提示的js：

layer.bindTooltip("<div style='background:white; padding:1px 3px 1px 3px'><b>" + area.toFixed(1) + "</b></div>", 
{
    direction: 'right',
    permanent: false,
    sticky: true,
    offset: [10, 0],
    opacity: 0.75,
    className: 'leaflet-tooltip-own' 
});

这篇文章非常有用。