Make tool tip wrap text

Question

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);

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

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

Here is a working example