8

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.

11

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! – Tom Chadwin Oct 3 '16 at 13:57
  • 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. – Tom Chadwin Oct 4 '16 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! – Tom Chadwin Oct 4 '16 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. – IvanSanchez Oct 4 '16 at 14:42
  • 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) – matt wilkie Jul 10 '17 at 0:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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