How to disable events on the popup tip with leaflet 1.7.1

Question

I display a marker on a map with a popup window in which an image is displayed with a hyperlink.
When the mouse in on the tip, an hand is displayed (why ?) and if I click then the popup is closed !?

I added in my css the disable of the events on the tip but that seems to not be the solution.

var options = {
   'className': 'custom-popup'
}
popup = "<a href='" + (BASE_URL || '') + m.link + "'>" + "<img src='" +  (BASE_URL || '') + m.image + "' /></a>"; 
marker.bindPopup(popup,options).openPopup();

The css custom-popup supersedes the leaflet.css:

.custom-popup div.leaflet-popup-content {
  min-Width: 300px;
  max-Width: 300px;
  max-Height: 500px;
}
.custom-popup .leaflet-popup-content-wrapper {
  background:#2c3e50;
  color:#fff;
  font-size:16px;
  line-height:24px;
}
.custom-popup .leaflet-popup-tip-container {
  width:40px;
  height:20px;
  pointer-events: none;
}
.custom-popup .leaflet-popup-tip {
  background:#2c3e50;
}

score 0 · Accepted Answer · answered Dec 03 '20 at 16:34

When the mouse in on the tip, an hand is displayed (why ?) and if I click then the popup is closed !?

Precisely because pointer-events: none is the default for .leaflet-popup-tip-container. The tip does not trigger events, so when a user clicks on the tip, the click goes straight through to the underlying element (the Leaflet map), which does trigger events. Then, the default behaviour when clicking on the map itself is to close the active popup.

Also related: There is no such thing as "disabling" events and parts of a Leaflet popup.

The approach here would be to apply the CSS rule pointer-events: auto or pointer-events: initial to .leaflet-popup-tip. Pointer interactions on the tip shall trigger DOM events that are not listened to and therefore do nothing.

OK !!! what is the difference between auto and initial ? – jpc Dec 04 '20 at 15:01 — jpc, Dec 04 '20 at 15:01

score 0 · Answer 2 · answered Dec 03 '20 at 16:43

Don't add the popup directly to marker, create a popup "layer" and open it, when clicked on the marker:

// a global variable
var popup = L.popup({'className': 'custom-popup', closeOnClick: false, autoClose: false, closeButton: true});

function openPopup(e){
    var marker = e.target;
    popup.options.offset = marker.options.icon.options.popupAnchor;
    popup.setContent(marker._popupContentTemp).setLatLng(marker.getLatLng()).addTo(map)
}


//your marker creation with click event
marker = new L.marker(latlng).addTo(lmap);
marker.on('click',openPopup, this)
marker._popupContentTemp = "<a href='" + (BASE_URL || '') + m.link + "'>" + "<img src='" +  (BASE_URL || '') + m.image + "' /></a>";

Now the popup is opened with the custom content and can't closed by clicking on the marker

How to disable events on the popup tip with leaflet 1.7.1

2 Answers2