How to display popup on mouse-over, not on click?

Question

Trying to display a pop-up on mouse-over rather than click.  Currently using the bindPopup method to display the information dynamically from a feature layer.  However, not certain as to the correct way to get this to work on a mouse-over instead?

Also noticing that when I click the icon, the popup sometimes extends past the top of the page.  Any idea as to how to prevent this?

Also, any advice how to fix the zoom and map position so that the user is unable to scroll or pan the map?

Thanks in advance for your help!!

JSFiddle

Live:  http://aquagear.site44.com/

JohnGravois · Answer

you're asking too many different questions in a single geonet post.

1. instead of calling bindPopup(), you'll need to implement your own logic within featureLayer.on("mouseover") / featureLayer.on("mouseout") (example)

2. by default, the popup option autoPan is set to true. this should ensure that the popup is displayed even if the map has to be recentered.

3. check out the leaflet map constructor option maxBounds

WinstonHoyle · Answer

Your fiddle seems to not be working but I think I understand what you are trying to do. locations.bindPopup(/*Insert your popup information*/, { maxWidth: 560, maxHeight: 500 });‍‍‍‍ The Popup object has options that are found in the leaflet documentation: https://leafletjs.com/reference-1.3.2.html#popup-l-popup