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.
asked Oct 3, 2016 at 12:30
Add a comment
|
1 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;
}
answered Oct 3, 2016 at 13:52
-
OK, I'll write out a full class for each layer and attach via that option. Thanks! Oct 3, 2016 at 13:57
-
1Is 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-leftand-rightclasses, with the pseudo-elements, and see where I get, Thanks! Oct 4, 2016 at 13:51 -
1Yeah, you are free to inspect and overwrite the CSS rules which apply to
.leaflet-tooltip(and-leftand-right). Just make sure you do that after loading the Leaflet CSS. Oct 4, 2016 at 14:42 -
1To modify the little right or left pointing triangle edit the
::beforeclass. 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