Showing popup on mouse-over, not on click using Leaflet?

Question

Is it possible in Leaflet that popup opens on mouse-over, not on click?

This is working for just one marker at a time, but I need it for a bigger number of markers:

marker.on('mouseover', function(e){
    marker.openPopup();
});

Answer 1

If you need to show the popup for a marker you can use markers bindPopup method.

Then you have more control and it will automatically be bound to your marker.

In the example below you can show the popup when the user mouses over, and hide it when the user mouses out:

        marker.bindPopup("Popup content");
        marker.on('mouseover', function (e) {
            this.openPopup();
        });
        marker.on('mouseout', function (e) {
            this.closePopup();
        });

Note: You may run into issues with the popups closing when you mouse onto the popup itself, so you might need to adjust the popup anchor in (see popup settings) to show your popups a bit farther away from marker itself so it doesn't disappear too easily.

Answer 2

If you're using Leaflet 1.3.x, tooltip binding is a built in method.

http://leafletjs.com/reference-1.3.0.html#tooltip

var polyline = L.polyline([[StartLat, StartLong],[EndLat,EndLong]]).addTo(this.map);
    polyline.bindTooltip("tool tip is bound");

Answer 3

This will helps to show popup on marker mouseover

marker.on('mouseover', function(e) {
  //open popup;
  var popup = L.popup()
   .setLatLng(e.latlng) 
   .setContent('Popup')
   .openOn(map);
});

Answer 4

This is not a Leaflet-specific problem, but rather a question of Javascript.

Store your markers in a collection, and then bind openPopup to a 'mouseover' event for all of them.

For example, with an array:

var markers = getAllMarkers(); // up to you to implement, say it returns an Array<L.Marker>

for (var i = 0; i < markers.length; i++) {
    var currentMarker = markers[i];
    currentMarker.on('mouseover', currentMarker.openPopup.bind(currentMarker));
}

Answer 5

In terms of having a solution that works "for a bigger number of markers", this is what I do for each layer of point data loaded from GeoJSON:

var layerPopup;
featureLayer.on('mouseover', function(e){
    var coordinates = e.layer.feature.geometry.coordinates;
    var swapped_coordinates = [coordinates[1], coordinates[0]];  //Swap Lat and Lng
    if (map) {
       layerPopup = L.popup()
           .setLatLng(swapped_coordinates)
           .setContent('Popup for feature #'+e.layer.feature.properties.id)
            .openOn(map);
    }
});
featureLayer.on('mouseout', function (e) {
    if (layerPopup && map) {
        map.closePopup(layerPopup);
        layerPopup = null;
    }
});