Leaflet Popup Hover

by falkedesign

HTML

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="//unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
  </head>

  <body>
      <div id="map-div"></div>
  </body>

</html>

CSS

html, body{  
   height: 100%;
   width: 100%;
   margin: 0;
}


 #map-div {
   height: 100%;
   width: 100%;
}

JavaScript

var map = L.map('map-div').setView([60.1682653, 24.9422078], 5);
var basemap = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: 'Basemap (c) <a href="http://openstreetmap.org">OpenStreetMap</a>',
  //minZoom: 5,
  maxZoom: 100
});
basemap.addTo(map);

var result = { 
	"test" : [null, 60.1682653, 24.9422078]
}

var key  = "test";

result[key][16] = "TEST TEXT 1";

var popup = 'Code : ' + result[key][16];
var layerPopup;
L.marker([result[key][1], result[key][2]]).addTo(map).on({
            mouseover: function (e) {
            	layerPopup = L.popup({
                        closeButton: false,
                        className: 'hover'
                    })
                    .setLatLng(e.latlng)
                    .setContent(e.target.getPopup().getContent())
                    .openOn(map);
            },
            mouseout: function (e) {
 							 map.closePopup(layerPopup);
            }
        }).bindPopup(popup);