Mapbox GL popup text is unselectable

Question

The text in my popups is unselectable. I am able to close popups via click, etc., but when hovering the pointer over the text, the pointer remains as the hand icon, and never changes into the I-beam text selection icon. I've tried adding the popups a few different ways, to no avail:

//with visgl/react-mapbox-gl:
<Popup latitude={0.0} longitude={0.0}>this text is unselectable</Popup>

//via the regular api:
new MapboxGL.Popup()
    .setLngLat([0.0, 0.0])
    .setHtml(<h1>this text is also unselectable</h1>)
    .addTo(map);

//this method that I copied from somewhere:
const placeholder = document.createElement('div');
ReactDOM.render(<h1>still unselectable</h1>, placeholder);
new MapboxGL.Popup()
     .setDOMContent(placeholder)
     .setLngLat()
     .addTo(map);

In the Mapbox examples, their text is selectable. Any idea why mine isn't? Thanks.

Answer 1

I believe it will be difficult to get to the exact cause without a running example. Here are some ideas:

• Use the same class they use in the examples for the content: mapboxgl-popup-content
• Inspect the HTML and see if there isn't some sort of invisible layered element on top of your text. From the Browser DevTools, in the "Inspector" (Firefox) or "Elements" (Chrome) tab, by hovering the tags, you'll be able to see the bounding box of each rendered element like so:

• Similar to the point before, check for the z-index CSS property in the rendered element to see if something isn't layering on top of your content

Lastly, there's also the cursor CSS property which you can use to force the cursor's appearance.