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){
  • 1
    If you have two questions, please open two threads so they can be answered separately.
    – underdark
    Commented Aug 22, 2012 at 13:19
  • There are lots of well upvoted answers here. If one of them helped you, please pay back that help by accepting one, in order to help others who read this question in future. Thanks (please note, non-of the answers are mine)
    – Mawg
    Commented Jan 18, 2021 at 10:42

5 Answers 5


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) {
        marker.on('mouseout', function (e) {

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.


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


var polyline = L.polyline([[StartLat, StartLong],[EndLat,EndLong]]).addTo(this.map);
    polyline.bindTooltip("tool tip is bound");
  • 3
    Fantastic. Totally avoids the "mouseover"/"mouseout" jitter described above.
    – Nick K9
    Commented Jun 10, 2019 at 20:10
  • 1
    bindTooltip() works on individual markers too.
    – S. Baggy
    Commented Sep 12, 2019 at 6:19
  • 1
    tx @S.Baggy, i used [var_names].push(L.circleMarker([latitude, longitude], { color: colorScaled, fillColor: colorScaled, fillOpacity: -1, radius: 1 }).addTo(leafletSearchMap).bindTooltip(popupValue)); In case better ways. as well would like to have the background colored from the color makrker which uses colorScale. Tx a lot!
    – Je Je
    Commented Jun 10, 2023 at 16:18

This will helps to show popup on marker mouseover

marker.on('mouseover', function(e) {
  //open popup;
  var popup = L.popup()
  • 1
    thanks! this code helped me in something unrelated to this question.
    – Abbafei
    Commented Jan 6, 2017 at 2:01

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?
    – MattiSG
    Commented Aug 23, 2012 at 9:34
  • 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? Commented Aug 23, 2012 at 14:03
  • @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.
    – MattiSG
    Commented Aug 24, 2012 at 14:40

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()
           .setContent('Popup for feature #'+e.layer.feature.properties.id)
featureLayer.on('mouseout', function (e) {
    if (layerPopup && map) {
        layerPopup = null;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.