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.

1 Answer 1


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.

  • OK, I'll write out a full class for each layer and attach via that option. Thanks! Oct 3, 2016 at 13:57
  • 1
    Is it possible, though, to "reset" the CSS for all layers' labels, ie to remove the border/bgcolor? The individual styles I attach via classname could then only have the extra declarations required. Oct 4, 2016 at 13:50
  • Just seen your updated answer. I'll try .leaflet-tooltip, and its -left and -right classes, with the pseudo-elements, and see where I get, Thanks! Oct 4, 2016 at 13:51
  • 1
    Yeah, you are free to inspect and overwrite the CSS rules which apply to .leaflet-tooltip (and -left and -right). Just make sure you do that after loading the Leaflet CSS. Oct 4, 2016 at 14:42
  • 1
    To modify the little right or left pointing triangle edit the ::before class. Ex: to hide it altogether: .leaflet-tooltip-left.myCSSClass::before {border-left-color: transparent;} (Took me a long time to figure that out) Jul 10, 2017 at 0:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.