Question

Is it possible to have 2 different styles for Popups in Leaflet? 2 different popups (in terms of style and content) will be triggered on user interaction, one on mouseover and one on click.

Problem: I tried overiding the CSS style for .leaflet-popup-content-wrapper' in the stylesheets which works for one popup style, that was not able to switch the CSS styles at runtime to switch back and forth between 2 CSS styles, probably because the popup DOM elements were not loaded yet.

marker.on('mouseover', function() {
    marker.bindPopup('<b>Hello world</b>');
    marker.openPopup();
})

marker.on('click', function() {
    marker.bindPopup('<b>Click click</b>');
    marker.openPopup();

    // Failed attempt to switch style
    $('.leaflet-popup-content-wrapper').addClass('new-style');
})

Answer 1

The bindPopup method can be passed an "options" parameter which can contain a "className" attribute that will be added to the div for the popup:

marker.on('mouseover', function() {
    marker.bindPopup('<b>Hello world</b>',{className: 'mouseover-popup'});
    marker.openPopup();
})

marker.on('click', function() {
    marker.bindPopup('<b>Hello world</b>',{className: 'click-popup'});
    marker.openPopup();
})