傳單 - 樣式化工具提示

Question

我正在嘗試在 Leaflet 中設置工具提示的樣式。 由於各種變化並試圖合並不同的模塊，我一直在修復一些事情。

有問題的工具提示需要有白色背景、黑色粗邊框、粗體文本和透明。

我想這會很容易，而且我已經用 JS 和 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);
}

Answer 1

所以，有幾個問題。

一，我仍然鏈接到互聯網上的 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' 
});

這個帖子很有用。