topic Popup Component Title Font Size in ArcGIS JavaScript Maps SDK Questions

Popup Component Title Font Size

ZorbaConlen1 — Wed, 05 Aug 2026 20:33:06 GMT

Hi. For my app, I need control over popups such that some open and close on hover and others on click. Therefore, I have disabled default popup for the view and am creating new popup components like below. Note that I'm intentionally using the component as my understanding is that widgets will be retired soon:

//Create separate popup components const hoverPopup = document.createElement("arcgis-popup"); hoverPopup.view = view; view.ui.add(hoverPopup);

This works nicely. The content is coming from the configured popup in my webmap. But there is one issue: For some reason, the popup title font is very small. This seems like a bug, but I was confident I could override the style and increase the font size for title portion. I'm finding that it's very difficult to do, however due to the style being defined in the shadow dom. Here's how it looks in my app:

Any advice on how to target that title font via css, or another approach?

On a side note, I'm seeing this with other components I have added as well, like panels, layer list, etc. Often the font sizes are very small.

Thanks

Re: Popup Component Title Font Size

ReneRubalcava — Wed, 05 Aug 2026 22:20:01 GMT

The popup component is only meant to be used in a map or scene component. If you add it to the view.ui, the css won't target things correctly, as you can tell in your image, and some other odd stuff might happen too. Maybe you can use it like that, but not recommended.

If you want to have your own popup comp with your app, you can do it like this.

<arcgis-map item-id="45725ba7d9fb47a0925398919b13d1fa" popup-disabled> </arcgis-map> <script type="module"> const mapElement = document.querySelector("arcgis-map"); const popupElement = document.createElement("arcgis-popup"); popupElement.slot = "popup"; mapElement.append(popupElement); mapElement.addEventListener("arcgisViewClick", async (event) => { const { results } = await mapElement.hitTest(event.detail); const features = []; for (let result of results) { // avoid basemap results, it's just empty if (result.layer.type === "feature") { features.push(result.graphic); } } popupElement.features = features; popupElement.location = event.detail.mapPoint; popupElement.open = true; }); </script>

demo: https://codepen.io/odoe/pen/bNeYWRd?editors=1000

Re: Popup Component Title Font Size

ZorbaConlen1 — Thu, 06 Aug 2026 15:43:57 GMT

Got it. Working now. Thanks!