Leaflet Marker Mouseover Popup

Question

I've tried to make a MouseOver Markers Popup since a couple of days, I'm using Leaflet. I know some solutions I've read in many forums, but I wanna make it work with GeoJSON-Points and I haven't found a solution yet.

Here is a working example, for click popups only:

$('#map').each(function () {
    // map initialization
    map = new L.map('map');

    var gjsonMarker = [{
        "type": "Feature",
        "properties": {
            "name": "start",
            "popupContent": "Portoferraio"
        },
        "geometry": {
            "type": "Point",
            "coordinates": [10.3163552, 42.8072368, 0.0]
        }
    },
    {
        "type": "Feature", "properties": { "name": "stop", "popupContent": "Marciana Marina" },
        "geometry": { "type": "Point", "coordinates": [10.1970935, 42.8069535, 0.0] }
    },
    {
        "type": "Feature", "properties": { "name": "stop", "popupContent": "Bastia" },
        "geometry": { "type": "Point", "coordinates": [9.4520402, 42.6943563, 0.0] }
    },
    {
        "type": "Feature", "properties": { "name": "stop", "popupContent": "Campoloro" },
        "geometry": { "type": "Point", "coordinates": [9.5417333, 42.3393521, 0.0] }
    },
    {
        "type": "Feature", "properties": { "name": "stop", "popupContent": "Cavo" },
        "geometry": { "type": "Point", "coordinates": [10.422377586, 42.859476028, 0.0] }
    }];

    gpsMarker = new L.geoJson(gjsonMarker, {
        onEachFeature: function(feature, layer) {
            if (feature.properties && feature.properties.popupContent) {
                layer.bindPopup(feature.properties.popupContent, {closeButton: false});
            }
        },
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng);
        }
    });

    map.addLayer(gpsMarker);
    map.fitBounds(gpsMarker.getBounds(), {padding: [0, 0]});
});

Any ideas how to make the Popup with MouseOver effect, and when I leave the point the popup must be hidden again.

Greets!

Answer 1

You just have to add 'mouseover' and 'mouseout' event listeners to your newly created layer.

You will also want to change the offset of the popup to make it higher. If not, you will have annoying mouseout when the mouse comes near the arrow of the popup, causing the disappearance of the popup.

gpsMarker = new L.geoJson(gjsonMarker, {
        onEachFeature: function(feature, layer) {
            if (feature.properties && feature.properties.popupContent) {
                layer.bindPopup(feature.properties.popupContent, {closeButton: false, offset: L.point(0, -20)});
                layer.on('mouseover', function() { layer.openPopup(); });
                layer.on('mouseout', function() { layer.closePopup(); });
            }
        },
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng);
        }
    });

http://jsfiddle.net/FranceImage/ov2ufL8b/

Answer 2

You can save 2 lines of code by using the .bindTooltip

layer.bindTooltip(feature.properties.popupContent, {closeButton: false, offset: L.point(0, -20)});