I can't figure out how to wrap the text on the leaflet tooltip. I dont want to display the marker so its hidden, but i want to the text to wrap the text in the tooltip if possible

.myTooltip {
 background: green;
 border: 2px solid cyan

.leaflet-tooltip-left.myTooltip::before {
 border-left-color: cyan;
.leaflet-tooltip-right.myTooltip::before {
  border-right-color: red;

then adding to the map, i've change the properties of the no wrap but doens't seem to effect anything. Also, for some reason the background color doens't seem to be changing, but thats a different questions

  var marker = L.marker(new L.LatLng(item.Latitude, item.Longitude), { opacity: 0 }); //can be set to zero
                marker.bindTooltip(item.Text, { permanent: true, noWrap: true, className: "myTooltip", offset: [0, 0] });

enter image description here

1 Answer 1


You need to override white-space property of leaflet-tooltip class. Additionally, you may set the width of the tooltip as well.

Just add this after your leaflet.css file

    width: 100px;
    white-space: normal;

Here is a working example


Your Answer

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

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