Javascript 传单-设置工具提示的样式

我正在尝试在传单中设计一个工具提示。由于各种各样的变化，并试图合并不同的模块，我已经修复了一些事情，以他们是如何

相关的工具提示需要有白色背景、黑色边框、粗体文本和透明

我想象这将是相当容易的，我已经用JS和html管理了大部分。但是，无论出于什么原因，我都无法让CSS使用它（处理mopleat.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，但是如果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);
}

最终编辑-找到，感谢。三角形（或“尾部”）的样式选项位于。传单工具提示左：前和。传单工具提示右：前。新的css代码（仅更改了左边框颜色和右边框颜色-无需对js进行任何更改，因为这似乎是继承的）：

所以，有几个问题

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

通过css进行样式设置时，三角形/尾部出现了一些问题，可以在.传单工具提示左：前和传单工具提示右：前位中解决这些问题

CSS:

以及调用工具提示的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' 
});

layer.bindTooltip（“+area.toFixed（1）+”，
{
方向：'对'，
永久性：假，
斯蒂奇：是的，
偏移量：[10,0]，
不透明度：0.75，
类名：“传单工具提示自己”
});

---

非常有用。

你想从我们这里得到什么？我尝试了你的代码，这段代码创建了一个带有蓝色背景、黑色边框和粗体文本的工具提示。。。就像你描述的那样。如果要删除白色边框，请从CSS中删除

边框：1px solid#fff

。也许你可以分享一张图片，它应该是什么样子的。我的没有黑色边框。将尝试添加图片。

.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 {
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);
}

.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);
}

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' 
});