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

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

    If you have two questions, please open two threads so they can be answered separately.

  • 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.

    Solution for keeping the popup visible when hovering onto it - http://jsfiddle.net/sowelie/3JbNY/

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

    thanks! this code helped me in something unrelated to this question.

  • 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");
    

    Fantastic. Totally avoids the "mouseover"/"mouseout" jitter described above.

    `bindTooltip()` works on individual markers too.

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

    Opinion in a comment rather than in the answer: I think the usability of hover-opened popups on a map, where by definition your cursor wanders around a lot, is questionable. Do you really want your users to do pathfinding between markers to finally attain the one they want but always gets hidden behind popups whenever they try to move their cursor towards their target?

    This is not my choice, unfortunately. I have markers stored like new L.MarkerClusterGroup with Leaflet MarkerCluster: var markers = new L.MarkerClusterGroup(); would that coding you wrote work for it, too?

    @againstflow Erm, you should change your question, then. You're not only asking to open markers on hover, you're asking how to iterate over markers in a `L.MarkerCluster` instance… My answer clearly shows how to bind a collection of popups on hover. If you want to know how to obtain a collection from a cluster, this is something else.

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

    Just curious, what type of object is featureLayer? Looks like this is a great solution.

License under CC-BY-SA with attribution


Content dated before 6/26/2020 9:53 AM