Creating a popup when hovering a line in Mapbox

Question

I have a custom line in mapbox that displays a popup when you click it, how can I make it so it shows only when you hover it ? I changed from "click" to "mouseenter" but it did not closed the popup. What needs changing so when I hover over this line it shows the popup and then it closes when leaving the line/popup?

Here is a jsfiddle example :

JS

mapboxgl.accessToken = '';
 var map = new mapboxgl.Map({
 container: 'map',
 style: 'mapbox://styles/mapbox/streets-v11',
 center: [-0.066985, 51.503363],
 zoom: 9
 });
map.on('load', function() {
 map.addSource('routeThree', {
 'type': 'geojson',
 'data': {
 'type': 'Feature',
 'properties': {},
 'geometry': {
 'type': 'LineString',
 'coordinates': [
 [-0.066985, 51.503363],
 [-3.550610, 40.390555 ],
 [-77.140217, 38.801481],
 [-118.175979, 34.008447]
 ]
 }
 }
 });
 map.addLayer({
 'id': 'routeThree',
 'type': 'line',
 'source': 'routeThree',
 'layout': {
 'line-join': 'round',
 'line-cap': 'round'
 },
 'paint': {
 'line-color': '#04A5BD',
 'line-width': 8
 }
 });
 map.on('click', 'routeThree', function(e) {
 new mapboxgl.Popup()
 .setLngLat(e.lngLat)
 .setHTML("<h2>This is the third line that will explain something</h2>")
 .addTo(map);
 
 });
 
 
 });

Answer 1

You'd need to add the closing as part of a mouseleave event

map.on('mouseleave', 'routeThree', function() {
 popup.remove();
});

---

Note that this assumes a template popup var above function scope to get accessed, i.e.

var popup = new mapboxgl.Popup({
 <options>
});

See the official example for more on the general usage.