Css 添加自定义bindTooltip类

我试图将自定义类添加到bindTooltip中，但新类没有显示。我的方法是基于问题的

我的自定义弹出类工作正常，但是如果我想覆盖工具提示类，那么它现在就可以工作了

我的JS代码：

 var PopupClass={'className': 'class-popup'}
 var TooltipClass={'className': 'class-tooltip'}

L.marker(
  [46.17319713, 21.34458608],
  {icon: OnlineMarker}
).bindPopup(
  'Test Popup', 
  PopupClass
).bindTooltip(
  'Test Tooltip',
  {direction: 'top', permanent: true, offset: [10,0]}, 
  TooltipClass
).addTo(MyMap)

/* popup-class*/

.class-popup .leaflet-popup-content-wrapper {
  background:#2980b9;
  color:#fff;
  font-size:10px;
  line-height:10px;
  }

.class-popup .leaflet-popup-content-wrapper a {
  color:#2980b9;
  }
.class-popup .leaflet-popup-tip-container {
  width:40px;
  height:20px;
  }
.class-popup .leaflet-popup-tip {
  background:#2980b9;
  }

/* tooltip-class*/ 

.class-tooltip{
  background: green;
  border: 2px solid cyan
}
.leaflet-tooltip-left.class-tooltip::before {
  border-left-color: cyan;
}
.leaflet-tooltip-right.class-tooltip::before {
  border-right-color: cyan;
}

我的CSS代码：

 var PopupClass={'className': 'class-popup'}
 var TooltipClass={'className': 'class-tooltip'}

L.marker(
  [46.17319713, 21.34458608],
  {icon: OnlineMarker}
).bindPopup(
  'Test Popup', 
  PopupClass
).bindTooltip(
  'Test Tooltip',
  {direction: 'top', permanent: true, offset: [10,0]}, 
  TooltipClass
).addTo(MyMap)

/* popup-class*/

.class-popup .leaflet-popup-content-wrapper {
  background:#2980b9;
  color:#fff;
  font-size:10px;
  line-height:10px;
  }

.class-popup .leaflet-popup-content-wrapper a {
  color:#2980b9;
  }
.class-popup .leaflet-popup-tip-container {
  width:40px;
  height:20px;
  }
.class-popup .leaflet-popup-tip {
  background:#2980b9;
  }

/* tooltip-class*/ 

.class-tooltip{
  background: green;
  border: 2px solid cyan
}
.leaflet-tooltip-left.class-tooltip::before {
  border-left-color: cyan;
}
.leaflet-tooltip-right.class-tooltip::before {
  border-right-color: cyan;
}

您有两个问题：

您尝试使用

.bindTooltip

的第三个参数指定工具提示类，该参数不按照传单文档执行任何操作。相反，您应该在第二个参数（

options

）中合并

className

键。为此，您可以：

• 直接写在

  选项中

• 工具类和选项：

  L.Util.extend（myOptions，工具类）

• 使用与上述步骤相同的步骤

CSS中的

.class工具提示

选择器不足以覆盖默认的传单样式。增加选择器的特定性，例如添加传单工具提示类：

。传单工具提示。类工具提示

var MyMap=L.map（'map'）.setView（[46.17319713,21.34458608]，11）；
var PopupClass={
“className”：“类弹出窗口”
}
变量TooltipClass={
“类名称”：“类工具提示”
}
L.标记（[46.17319713,21.34458608]）
.bindPopup（'测试弹出窗口'，PopupClass）
.bindTooltip（'测试工具提示'{
方向：'顶部'，
永久性：是的，
偏移量：[10,0]，
//“类名称”：“类工具提示”
…TooltipClass//使用扩展运算符（ES2018）
}，TooltipClass）//第三个参数不起任何作用
.addTo（MyMap）；
L.tileLayer（'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
属性：“©；贡献者”
}).addTo（MyMap）
/*弹出类*/
.类弹出窗口.传单弹出内容包装器{
背景#2980b9；
颜色：#fff；
字体大小：10px；
线高：10px；
}
.类弹出窗口.传单弹出内容包装器a{
颜色：#2980b9；
}
.类弹出。传单弹出提示容器{
宽度：40px；
高度：20px；
}
.类弹出窗口.传单弹出提示{
背景#2980b9；
}
/*工具提示类*/
.传单-工具提示.类别-工具提示{
背景：绿色；
边框：2倍纯青色
}
.左侧传单工具提示。类工具提示：：之前{
左边框颜色：青色；
}
.传单工具提示右侧。类工具提示：：之前{
右边框颜色：青色；
}

很抱歉，这只是一个输入错误，在我的代码中是corrett syntact。您的答案非常有效，我认为非常有用。谢谢您的反馈！：-）