[Popup] Name is ambiguous

[tomayac]

Browsers have since essentially forever used the term "popup" or "pop-up" to refer to windows that open from the context of an existing tab. For example, this is a section from Chrome's site settings:

English is not my first language, but maybe something like "float" or "floatable" may express the idea in a more distinguishable way?

[melanierichards]

Thanks for the feedback, @tomayac! I expect we'll discuss a final name for the element in web standards discussions. Keeping this issue open for anyone else who wishes to put forward an alternative component name.

[claviska]

Throwing "popover" out there for consideration.

[Krinkle]

Generally common terms:

• popup (confused meaning, especially in browsers and frontend development)
• tooltip (too specific, covers narrow use case)
• hover card (too specific, covers narrow use case, specific to sighted mouse users, outdated "hover" term predating touch and other pointer events)
• dialog (too specific, covers narrow use case, already in-use)

Frameworks terms for an element near another one, positioned to avoid overflow the viewport or other visual container if near its edge:

• popover (Popper.js, Vue.js integration, Bootstrap integration, Material UI)
• positioned (Flutter Positioned/Dependent, jQuery UI)

+1 for "popover"!

[Malvoz]

I personally think of "popup" as a popup component and not a popup window. Anyhow, the WAI-ARIA Authoring Practices' tooltip widget is described as:

A tooltip is a popup that displays information [...]

That might be a confusing sentence if "popup" was a native element. But if it was "popover" instead for example, they could describe such a widget as: "A popover is a popup that [...]", and "A tooltip is a popup that [...]". It'd make sense for both widgets.

[tlouisse]

What about overlay?
I think it's a neutral name that is generic enough to fit all components you could build with this (selects, dropdown menus, comboboxes, tooltips, popovers, modal dialogs etc. etc.)

As @Malvoz points out, tooltip is already claimed by [role=tooltip] and its behavior is different from other overlays ([role=dialog]) since it does not contain interactive content.

We faced the same naming questions when building our overlay system. Here we outline the differences between the roles provided by W3C (tooltip / dialog / alertdialog / menu / listbox / grid / tree)

[claviska]

Overlay is more commonly a backdrop or scrim. I think of it more as something that covers an entire element or region.

[tlouisse]

I think overlay is actually a common name in UX vocabulary:

• https://xd.adobe.com/ideas/process/ui-design/best-practices-for-designing-overlays/
• https://www.audi.com/ci/en/guides/user-interface/components/overlays.html
• https://www.pinterest.com/lifuericalin/ui-overlays-popups-and-messages/
• https://dribbble.com/tags/overlay
• https://collectui.com/challenges/pop-up-overlay
• many more... (these were the top Google results for 'overlay ui')

A backdrop would be an 'underlay' ;)

[una]

I don't think overlay is the right term here. Personally I like the original, popup or an alternate term: popout, as it's broad enough to describe the range of potential uses. popout helps signify the idea of an element connected to another (its anchor element) but doesn't specify directionality. A pop-* might not necessary be "above" (up) or on top of (over) its anchor element.

[tlouisse]

Ok, no problem 🙂
For me it would be dependent on the scope (also see the venn diagram mentioned here) of the new element, so what concrete examples would be built with it?

• Only elements positioned relative to their anchor/invoker like dropdown menus, selects, comboboxes, datepickers etc, with light dismiss behavior and no backdrop (let's call this category 1)?
• Or maybe the more (modal) dialog like examples which usally tend to be positioned relative to viewport and possibly containing a backdrop (let's call this category 2) as well?

As the explainer described extending the dialog was considered, I thought there might be a chance the new element could become a replacement of the <dialog> (also because Firefox has it behind a flag for a long time and Safari doesn't support it) and cover both 1 and 2 (because I think in practice there will be a lot of elements that are a hybrid between category 1 and 2, especially when mobile/desktop switching is considered as well).

If the new element would cover both category 1 and 2, I think overlay could - a few Google image searches give me both category 1 and 2 - be a neutral 'umbrella name'.

If it only covers category 1 (which it tends to do), then I agree popup or popout are the best names 👍

[FezVrasta]

👋 when I needed to give a name to Popper I decided to call it like that because:

1. popup = standalone annoying window with ads inside :-)
2. tooltip = little floating bubble that shows on hover/click and goes away on mouse leave
3. popover = larger floating bubble, with interactive content inside, dismissable by clicking outside

So I ended up "inventing" popper as a catch-all term

[melanierichards]

Hi everyone, thanks for the discussion! I am closing this issue as the <popup> explainer has graduated to the Open UI Community Group for incubation. If you'd like to continue participating in this discussion, please join us in Open UI #296. Thanks!