> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt) # Display a popup on hover This example demonstrates how to create a [`Popup`](https://docs.mapbox.com/mapbox-gl-js/api/markers/#popup) when a user hovers over a circle. Using the [Interactions API](https://docs.mapbox.com/mapbox-gl-js/guides/user-interactions/interactions/), a `mouseenter` listener is created to detect when the mouse begins to hover over a circle. The handler then grabs the underlying geojson features geometry & properties, including the circle's coordinates and a title and description. With this data, a pop up is rendered over the circle's coordinates by calling `setLngLat(coordinates)` and setting the text of the pop up using the `setHTML(description)` function. > Example code: **JavaScript** ```html Display a popup on hover
``` **React** ```jsx import React, { useEffect, useRef } from 'react'; import * as mapboxgl from 'mapbox-gl/esm'; import 'mapbox-gl/dist/mapbox-gl.css'; const MapboxExample = () => { const mapContainerRef = useRef(); const mapRef = useRef(); useEffect(() => { mapRef.current = new mapboxgl.Map({ // TO MAKE THE MAP APPEAR YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', container: mapContainerRef.current, style: 'mapbox://styles/mapbox/standard', center: [-77.04, 38.907], zoom: 11.15 }); mapRef.current.on('load', () => { mapRef.current.addSource('places', { type: 'geojson', generateId: true, data: { type: 'FeatureCollection', features: [ { type: 'Feature', properties: { description: 'Muhsinah

Jazz-influenced hip hop artist Muhsinah plays the Black Cat (1811 14th Street NW) tonight with Exit Clov and Gods’illa. 9:00 p.m. $12.

' }, geometry: { type: 'Point', coordinates: [-77.031706, 38.914581] } }, { type: 'Feature', properties: { description: "A Little Night Music

The Arlington Players' production of Stephen Sondheim's A Little Night Music comes to the Kogod Cradle at The Mead Center for American Theater (1101 6th Street SW) this weekend and next. 8:00 p.m.

" }, geometry: { type: 'Point', coordinates: [-77.020945, 38.878241] } }, { type: 'Feature', properties: { description: 'Truckeroo

Truckeroo brings dozens of food trucks, live music, and games to half and M Street SE (across from Navy Yard Metro Station) today from 11:00 a.m. to 11:00 p.m.

' }, geometry: { type: 'Point', coordinates: [-77.007481, 38.876516] } } ] } }); mapRef.current.addLayer({ id: 'places', type: 'circle', source: 'places', paint: { 'circle-color': '#4264fb', 'circle-radius': 6, 'circle-stroke-width': 2, 'circle-stroke-color': '#ffffff' } }); const popup = new mapboxgl.Popup({ closeButton: false, closeOnClick: false }); mapRef.current.addInteraction('places-mouseenter-interaction', { type: 'mouseenter', target: { layerId: 'places' }, handler: (e) => { mapRef.current.getCanvas().style.cursor = 'pointer'; // Copy the coordinates from the POI underneath the cursor const coordinates = e.feature.geometry.coordinates.slice(); const description = e.feature.properties.description; // Populate the popup and set its coordinates based on the feature found. popup .setLngLat(coordinates) .setHTML(description) .addTo(mapRef.current); } }); mapRef.current.addInteraction('places-mouseleave-interaction', { type: 'mouseleave', target: { layerId: 'places' }, handler: () => { mapRef.current.getCanvas().style.cursor = ''; popup.remove(); } }); }); }, []); return ( <>
); }; export default MapboxExample; ```