I'm adopting this example but I need popups to appear on hover not on click. Here is how popups are added now:
new mapboxgl.Marker(el, {
offset: [0, -25]
})
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup()//add popups
.setHTML('<h3>' + marker.properties.title + '</h3><p><a href="' + marker.properties.link + '" target="_blank">' + marker.properties.description + '</a></p><p><a href="' + marker.properties.link + '" target="_blank"><img src="' + marker.properties.picture + '" title="" /></a></p>'))
.addTo(map);
It is my jsFiddle, could anyone help me to fix that problem?
mapboxgl.Marker
are implemented as simple HTML<div>
elements. You can attach standard event listener to them and toggle the popup manually:See docs: https://docs.mapbox.com/mapbox-gl-js/api/#marker#getelement
EDIT: Preventing the popup from opening on click
I did some testing, and the only thing reliably working is to call
marker.togglePopup()
in your own click handlerFull example: https://jsfiddle.net/am2jwtzg/