Making popup appear on mouseover and not click in Leaflet

formatleafletpopup

I'm new vwith Leaflet, and I just got started this past week. I was wondering how to make my popups fire on mouseover rather than the default on click.

  //create variable to hold the map element, give initial settings to map
  var map = L.map("map", {
    center: [38.1, -98],
    zoom: 5,
  });

  //create basemap layer
  var osm = L.tileLayer(
    "https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}{r}.png",
    {
      attribution:
        '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
      subdomains: "abcd",
      maxZoom: 19,
    }
  );

  //add to map
  osm.addTo(map);

  var logo = L.icon({
    iconUrl:
      "https://d2q79iu7y748jz.cloudfront.net/s/_squarelogo/8ec294c2f144d43bf5d7ec5f4f96d0c9",
    iconSize: [20, 20],
    iconAnchor: [10, 20],
    popupAnchor: [0, -20],
  });

  // COLORADO
  L.marker([40.308746567390294, -105.08229135535235], {
    icon: logo,
    title: "Click to find out more!",
  })
    .addTo(map)
    .bindPopup("<h3>Berthoud, CO</h3>");

  L.marker([39.74102996214569, -104.97940776843281], {
    icon: logo,
    title: "Click to find out more!",
  })
    .addTo(map)
    .bindPopup("<h3>Denver, CO</h3>");
  //FLORIDA
  L.marker([30.138432902431312, -81.47832258872786], {
    icon: logo,
    title: "Click to find out more!",
  })
    .addTo(map)
    .bindPopup("<h3>Jacksonville, FL</h3>");
  //ILLINOIS
  L.marker([41.879448988274895, -87.6315117046291], {
    icon: logo,
    title: "Click to find out more!",
  })
    .addTo(map)
    .bindPopup("<h3>Chicago, IL</h3>");

  L.marker([41.8007476149432, -88.07480791524236], {
    icon: logo,
    title: "Click to find out more!",
  })
    .addTo(map)
    .bindPopup("<h3>Lisle, IL</h3>");

  L.marker([39.77999819036976, -89.64469580209537], {
    icon: logo,
    title: "Click to find out more!",
  })
    .addTo(map)
    .bindPopup("<h3>Springfield, IL</h3>");
  //KENTUCKY
  L.marker([38.04604579443191, -84.50244254581874], {
    icon: logo,
    title: "Click to find out more!",
  })
    .addTo(map)
    .bindPopup("<h3>Lexington, KY</h3>");
  //INDIANA
  L.marker([41.472330129058626, -87.06337336083872], {
    icon: logo,
    title: "Click to find out more!",
  })
    .addTo(map)
    .bindPopup("<h3>Valparaiso, IN</h3>");

  L.marker([39.77172821881897, -86.15817364592962], {
    icon: logo,
    title: "Click to find out more!",
  })
    .addTo(map)
    .bindPopup("<h3>Indianapolis, IN</h3>");
  //IOWA
  L.marker([41.26104429429596, -95.8669285068911], {
    icon: logo,
    title: "Click to find out more!",
  })
    .addTo(map)
    .bindPopup("<h3>Council Bluffs, IA</h3>");
  //MASSACHUSETTS
  L.marker([42.36045708792693, -71.05470762310003], {
    icon: logo,
    title: "Click to find out more!",
  })
    .addTo(map)
    .bindPopup("<h3>Boston, MA</h3>");
  //OHIO
  L.marker([39.96068992182012, -82.99568108206131], {
    icon: logo,
    title: "Click to find out more!",
  })
    .addTo(map)
    .bindPopup("<h3>Columbus, OH</h3>");

  L.marker([41.499389586400504, -81.68319302542062], {
    icon: logo,
    title: "Click to find out more!",
  })
    .addTo(map)
    .bindPopup("<h3>Cleveland, OH</h3>");
  //SOUTH CAROLINA
  L.marker([33.999310722137295, -81.04237043257584], {
    icon: logo,
    title: "Click to find out more!",
  })
    .addTo(map)
    .bindPopup("<h3>Columbia, SC</h3>");
  //WISCONSIN
  L.marker([44.51263315662531, -88.01247710457417], {
    icon: logo,
    title: "Click to find out more!",
  })
    .addTo(map)
    .bindPopup("<h3>Green Bay, WI</h3>");

  L.marker([43.060874543136336, -88.1066145780849], {
    icon: logo,
    title: "Click to find out more!",
  })
    .addTo(map)
    .bindPopup("<h3>Brookfield, WI</h3>");

Best Answer

What you want to do is called tooltip, which is displayed upon mouse enter and hidden upon mouse leave. Just use .bindTooltip method instead of .bindPopup.

If you want tooltip to appear at the same place as popup (above marker):

  • use tooltipAnchor: [0, -20] option when defining marker icon,
  • use tooltip option {direction: 'top'} when defining tooltip.

Simplified code could then look something like this:

var data = [
  {coord: [40.308746567390294, -105.08229135535235], desc: 'Berthoud, CO'},
  {coord: [39.74102996214569, -104.97940776843281], desc: 'Denver, CO'},
  .
  .
  .
];

var logo = L.icon({
  iconUrl:
    "https://d2q79iu7y748jz.cloudfront.net/s/_squarelogo/8ec294c2f144d43bf5d7ec5f4f96d0c9",
  iconSize: [20, 20],
  iconAnchor: [10, 20],
  tooltipAnchor: [0, -20]
});
  
for (var i = 0; i < data.length; i++) {
  L.marker(data[i].coord, {
    icon: logo
  })
    .addTo(map)
    .bindTooltip('<h3>' + data[i].desc + '</h3>', {direction: 'top'});
}
Related Question