CODEWITHSUNDEEP
leaflettooltip
Antoine Schmitt
Antoine Schmitt

Reputation: 11

How to set a maximum width and height for leaflet tootips

I have an website where a user can set a tooltip content (free text input).

Since HTML can be used in leaflet tooltip content, such HTML can be set as the tooltip content : var html = '<img src="https://www.somesite.com/someimage.jpg">'; marker.bindTooltip(html);

If the image is very large, the tooltip display is as large as the image, potentially larger than the window..

I would like to set a maximum width and height of the tooltip. Such properties exist for popups (maxWidth, maxHeight options), but not for tootips.

I tried adding these to the tooltip CSS definition, but it does not do anything:

.leaflet-tooltip {
    max-width: 128px;
    max-height: 128px;
}

Any simple way to do this ? Thank you

Upvotes: 1

Views: 2508

Answers (1)

luishromero
luishromero

Reputation: 61

Add an 'id' or 'class' to the image and set the max-height and max-width to it.

js

var html = '<img id="image" src="https://www.somesite.com/someimage.jpg">';
marker.bindTooltip(html);

css

#image {
  max-width: 128px;
  max-height: 128px;
}

See my Codepen for an example: https://codepen.io/amapolauditiva/pen/bGVpWdQ

Answer extended

Also you can fit all the images that are inside of the tooltip:

.leaflet-tooltip img {
  max-width: 128px;
  max-height: 128px;
}

Upvotes: 1

Related Questions