2個不同的單張彈出式樣式

Question

是否有可能在Leaflet中有2種不同的彈出式樣式？用戶交互時會觸發2種不同的彈出窗口（風格和內容），一個彈出mouseover，一個彈出click。

問題：我試過overiding的CSS樣式中，適用於一個彈出式的樣式表.leaflet-popup-content-wrapper'，這是不能夠在運行時切換CSS樣式來回切換2種CSS樣式之間，可能是因爲彈出的DOM元素尚未加載。

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

的bindPopup方法可以傳遞一個"options"參數，它可以包含一個"className"屬性將被添加到div的彈出：

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