How to make a marker in Leaflet have two popups? One on mouseover and another on click?

Question

I want the titles to be hovered over markers on the map and when clicked on them a full popup with different content will open.

I'm trying to make a legend that contains a list of all the markers that will be used as links to the corresponding popups, but I can't seem to figure out how to do this.

Answer 1

You can set different pop-up windows for markers of different events. Here's an example of how to set it in the Point to Layer function:

var ptl = function(f, latlng){              
        
        var icon = L.icon({
            iconUrl: 'img/icon.png',
            iconSize:     [30, 50], // size of the icon
            iconAnchor:   [0, 25]
        });
    
            
        return L.marker(latlng, {icon: icon4}).on('click', function(e) {
                
            this.bindPopup(e.sourceTarget.feature.properties['content']);
        }).on('mouseover', function(e){
            var popup = L.popup({
                offset: [0, -30]
            })
                .setLatLng(e.latlng) 
                .setContent(e.sourceTarget.feature.properties['title'])
                .openOn(map);
                
        }).on('mouseleave', function(e){
            this.closePopup();
        });
            

    }