In my leaflet map I have this code that shows many markers.
I want to get the tooltip shown on mouseover but I get the mouse-over only for the last marker in the list. The other one shows only on click.
` var markers = [
<code> [ 9.39069271, 45.92184121, "Grignetta (2177 metri)" ],
[ 9.14496, 46.12351, "Pizzo di Gino" ],
[ 9.14714813, 46.00030059, "Cima di Lenno (1698 metri)" ],
];
//Marker Icon
var spot = L.icon({
iconUrl: '../_asset/icons/spot.svg',
iconSize: [18, 18], // size of the icon
});
//Loop through the markers array
for (var i=0; i<markers.length; i++) {
var lon = markers[i][0];
var lat = markers[i][1];
var popupText = markers[i][2];
var markerLocation = new L.LatLng(lat, lon);
var marker = new L.Marker(markerLocation, {icon: spot});
leafletmap.addLayer(marker);
marker.bindPopup(popupText);
};
marker.on('mouseover', function (e) {
this.openPopup();
});
marker.on('mouseout', function (e) {
this.closePopup();
});`
</code>
<code> [ 9.39069271, 45.92184121, "Grignetta (2177 metri)" ],
[ 9.14496, 46.12351, "Pizzo di Gino" ],
[ 9.14714813, 46.00030059, "Cima di Lenno (1698 metri)" ],
];
//Marker Icon
var spot = L.icon({
iconUrl: '../_asset/icons/spot.svg',
iconSize: [18, 18], // size of the icon
});
//Loop through the markers array
for (var i=0; i<markers.length; i++) {
var lon = markers[i][0];
var lat = markers[i][1];
var popupText = markers[i][2];
var markerLocation = new L.LatLng(lat, lon);
var marker = new L.Marker(markerLocation, {icon: spot});
leafletmap.addLayer(marker);
marker.bindPopup(popupText);
};
marker.on('mouseover', function (e) {
this.openPopup();
});
marker.on('mouseout', function (e) {
this.closePopup();
});`
</code>
[ 9.39069271, 45.92184121, "Grignetta (2177 metri)" ],
[ 9.14496, 46.12351, "Pizzo di Gino" ],
[ 9.14714813, 46.00030059, "Cima di Lenno (1698 metri)" ],
];
//Marker Icon
var spot = L.icon({
iconUrl: '../_asset/icons/spot.svg',
iconSize: [18, 18], // size of the icon
});
//Loop through the markers array
for (var i=0; i<markers.length; i++) {
var lon = markers[i][0];
var lat = markers[i][1];
var popupText = markers[i][2];
var markerLocation = new L.LatLng(lat, lon);
var marker = new L.Marker(markerLocation, {icon: spot});
leafletmap.addLayer(marker);
marker.bindPopup(popupText);
};
marker.on('mouseover', function (e) {
this.openPopup();
});
marker.on('mouseout', function (e) {
this.closePopup();
});`
I tried other solution but this one is the best i came up with.
Any help or hint?
New contributor
Haldo is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.