15

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.

PolyGeo
  • 65,136
  • 29
  • 109
  • 338
Tom Chadwin
  • 5,842
  • 4
  • 25
  • 48

2 Answers2

22

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.

IvanSanchez
  • 10,206
  • 2
  • 19
  • 35
  • OK, I'll write out a full class for each layer and attach via that option. Thanks! – Tom Chadwin Oct 03 '16 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. – Tom Chadwin Oct 04 '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 04 '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 04 '16 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) – matt wilkie Jul 10 '17 at 00:06
0

In addition to the comments above which focus on the pointed arrow part of the tooltip component, I also had some luck with:

.leaflet-tooltip {
    background-color: transparent;
    border: 0px;
    box-shadow: none;
}

Otherwise, I was still seeing the outline of the tooltip with a white (default) background, black (default) border and a box-shadow which itself appears as a border.

kdubbs
  • 1