[GIS] Overriding Leaflet tooltip style

cssleaflet

I'd like to override the default style of Leaflet 1.0.0 tooltips, especially the bubble/frame. I don't see any options or methods for this. How do I hook into the CSS? I want to change layers individually, so I need to select each layer's tooltips individually with CSS.

Best Answer

The L.Tooltip class includes a className option (inherited from the DivOverlay class), which will be converted into a CSS class when the tooltip is displayed. e.g.:

L.marker(latlng).addTo(map).bindTooltip('Text', {className: 'myCSSClass'});

Then, it's just a matter of defining that CSS class. The tip is a bit tricky, as it needs working with pseudo-elements and leaflet CSS classes:

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

See a working example here.

Related Question