2 different flyer popup styles

Question

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

Issue: I am trying to override a CSS style in .leaflet-popup-content-wrapper' in a stylesheet that applies to a popup style. But it is not possible to switch CSS styles back and forth between the two CSS styles at runtime, possibly because the pop-up DOM element has not yet been loaded.

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 the "className" attribute that will be added to the div. For popups:

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