I will analyze this problem. I think CSS rules would help.

I analyzed the map popups, and I hope to give you some advice. At the Wikivoyage maps there are two popups with different properties (local and nearby markers). Both popups have no close button.

1. Set Leaflet popup closeButton option to true (the default) for both popups.

2. Local markers' popup

The local markers' popups seem to use variable width div boxes, maybe between 50px and 300px (the default Leaflet parameters). Make them fixed, for instance to 141px.

Leaflet options:

• maxWidth : 141 px
• minWidth : 141px.

The popup divs are using a padding: 10px 10px 15px;

In this case you can set the image width to 120px which matches the popup box.

For the description the bold header is used. Maybe it is better to use instead of it a normal font-weight text caption below the image.

Code example generated by Leaflet:

<div class="leaflet-popup leaflet-zoom-animated" style="opacity: 1; transform: translate(-482px, 1266px); bottom: 28px; left: -98px;">
<div class="leaflet-popup-content-wrapper">

<div class="leaflet-popup-content" style="width: 194px;">
 <div class="marker-title">Sofitel Old Winter Palace Hotel</div>
 <div class="marker-description">
  <a class="image" href="/wiki/Datei:Winter_Palace_Luxor_front.jpg">
   <img width="300" height="225" data-file-height="1536" data-file-width="2048" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Winter_Palace_Luxor_front.jpg/450px-Winter_Palace_Luxor_front.jpg 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Winter_Palace_Luxor_front.jpg/600px-Winter_Palace_Luxor_front.jpg 2x" src="//upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Winter_Palace_Luxor_front.jpg/300px-Winter_Palace_Luxor_front.jpg" alt="Winter Palace Luxor front.jpg">
  </a>
 </div>
</div>

</div>
<div class="leaflet-popup-tip-container">

<div class="leaflet-popup-tip"></div>

</div>
</div>

In all the cases the image widths are set to 300px which could not match the box sizes, and normally they overflow the popup div.

I am not sure if you could change the Leaflet options. Therefore I propose the following workaround:

.leaflet-popup-content {
width: 141px !important;
}
.leaflet-popup-content .marker-title {
font-weight: normal;
}
.leaflet-popup-content img {

display: block;
width: 100% !important;
height: auto !important;

}

3. Nearby markers' popup

Clicking on the marker the popup will always be opened but never closed. You cannot close it by clicking on the marker. The only way to close it is to click on the map but on neither the marker nor the popup.

The nearby popups seem to use a fixed width of 141px. They do not use the marker title. The caption is below the image.

Code example:

<div class="leaflet-popup leaflet-zoom-animated" style="opacity: 1; transform: translate(846px, 127px); bottom: 27px; left: -71px;">
<div class="leaflet-popup-content-wrapper">

<div class="leaflet-popup-content" style="width: 141px;">
 <img src="//upload.wikimedia.org/wikipedia/commons/thumb/9/9a/ShanhurArcheolSite.jpg/120px-ShanhurArcheolSite.jpg">
 <a target="_blank" href="/wiki/Schanhūr">Schanhūr</a>
</div>

</div>
<div class="leaflet-popup-tip-container"> // bottom triangle

<div class="leaflet-popup-tip"></div>

</div>
</div>

Excuse my really bad English but I am not a native speaker.

Unfortunately, I confused tooltip with popup window. But there is a bug in the tooltip window, too. Ampersands are shown as &amp;. For instance, the company Gaddis & Co. becomes Gaddis &amp; Co.

In T140213#2509931, @RolandUnger wrote:

The local markers' popups seem to use variable width div boxes, maybe between 50px and 300px (the default Leaflet parameters). Make them fixed, for instance to 141px.

Leaflet options:

• maxWidth : 141 px
• minWidth : 141px.

Though 50px seem too small in any cases, are we sure we want to set a fixed width of 141px?
For instance, @Matroc has maps and markers with 300px wide popup on his User:Matroc page.

The popup divs are using a padding: 10px 10px 15px;

This should be fixed to 8px 16px (in accordance with M101).

In this case you can set the image width to 120px which matches the popup box.

For the description the bold header is used. Maybe it is better to use instead of it a normal font-weight text caption below the image.

Interesting suggestion. We should give it a try!

In all the cases the image widths are set to 300px which could not match the box sizes, and normally they overflow the popup div.

The 300px width is hardcoded in https://en.wikivoyage.org/wiki/Module:Map . It can be changed. But it can also be auto adjusted to the popup width, in CSS, as you showed below.

Clicking on the marker the popup will always be opened but never closed. You cannot close it by clicking on the marker. The only way to close it is to click on the map but on neither the marker nor the popup.

This can be annoying. I think adding the closeButton option makes sense. Let's try it.

The nearby popups seem to use a fixed width of 141px. They do not use the marker title. The caption is below the image.

Good catch. I'm gonna use the same rules and make them consistent.

Excuse my really bad English but I am not a native speaker.

Neither am I :)
Sincerely, your help is much appreciated. Thank you @RolandUnger.

note: I use <maplink> and <mapframe> with images set to 280px... Yes there is an issue in that the image goes beyond the div... I usually add the image name in the description field. I recently discovered that if I add text after the image in the description field - everything fits nicely (margins etc.). One caveat is that the text should be more than 10-15 characters. See India map with several cities on enwikivoyage Traveller's Pub which I recently edited. Perhaps this may provide a clue to resolving issue.

Also noted that the layers box in maps is missing on enwikivoyage -- imagine that is due to work currently being done....