2

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] });
                marker.addTo(mymap);

enter image description here

5

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

.leaflet-tooltip{
    width: 100px;
    white-space: normal;
}

Here is a working example

| improve this answer | |

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.