添加自定义 bindTooltip class

Question

我正在尝试将自定义 class 添加到我的 bindTooltip，但新的 class 没有显示。我的方法基于 this 问题。

我的自定义弹出窗口 class 工作正常，但如果我想覆盖工具提示 class，它现在可以正常工作。

我的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)

我的CSS代码：

/* 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;
}

Answer 1

您有 2 个问题：

您尝试使用 .bindTooltip 的第三个参数来指定您的工具提示 class，根据 Leaflet 文档，它不会执行任何操作。相反，您应该将 className 键合并到第二个参数 (options) 中。为此，您可以：
- 直接写在options
- extend 您的 TooltipClass 和您的选项：L.Util.extend(myOptions, TooltipClass)
- 使用 ES2018 spread operator 做与上述相同的事情。
您在 CSS 中的 .class-tooltip 选择器不足以覆盖默认的 Leaflet 样式。增加您的选择器特异性，例如添加传单工具提示 class：.leaflet-tooltip.class-tooltip

var MyMap = L.map('map').setView([46.17319713, 21.34458608], 11);
var PopupClass = {
  'className': 'class-popup'
}
var TooltipClass = {
  'className': 'class-tooltip'
}

L.marker([46.17319713, 21.34458608])
  .bindPopup('Test Popup', PopupClass)
  .bindTooltip('Test Tooltip', {
    direction: 'top',
    permanent: true,
    offset: [10, 0],
    //'className': 'class-tooltip'
    ...TooltipClass // using spread operator (ES2018)
  }, TooltipClass) // 3rd argument does not do anything
  .addTo(MyMap);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).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*/

.leaflet-tooltip.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;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<div id="map" style="height: 180px"></div>

添加自定义 bindTooltip class

Add custom bindTooltip class

css

class

tooltip

leaflet