1

I am a web developer building this component (the white rounded square)

component

I don't exactly know how to name it, is it a tooltip? I don't think so, since Wikipedia defines it as a small indicator that appears on hover, but this component is more complex (user can interact with it, go several "pages" deep inside it, etc) and doesn't disappear on hover.

It's not a modal either since it doesn't block interaction with what's underneath.

It's kind of a mix between a card and a reverse dropdown but naming it a drop-up card sounds off.

There is no matching name that I found here, here, or here

How would you name this category of UI component?

3
  • 1
    I'd call this a pop-up card or modal. – Zach Saucier Mar 10 at 17:59
  • I'd call them "sticky" tooltips. There's a simple example here. – r3mainer Mar 10 at 20:43
  • 1
    I like "pop-up" and "dialog box" or "task list" or "task wizard" -- since it is about interacting and navigating to other features while accomplishing a task – user8356 Mar 11 at 15:14
3

I think you could call this a Pop-Up, You might also see this referred to as a Popover, or Popper. The idea is the user clicks on a button and a modal like window "Pops" up on their screen calling attention for the user to make some type of decision or provide more detailed information than a tooltip.

In your example, I would call this a Pop-up Menu.

From w3Schools on Bootstrap Popover Plugin

The Popover Plugin

The Popover plugin is similar to tooltips; it is a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content.

This is not native to Bootstrap.

https://www.w3schools.com/bootstrap/bootstrap_popover.asp

Material Design

I believe the equivalent in Material Design would be called a "Dialog"

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

https://material.io/components/dialogs

Apple Human Interface Design

Apple refers to this type of design as Popovers.

A popover is a transient view that appears above other content onscreen when you tap a control or in an area. Typically, a popover includes an arrow pointing to the location from which it emerged. Popovers can be nonmodal or modal. A nonmodal popover is dismissed by tapping another part of the screen or a button on the popover. A modal popover is dismissed by tapping a Cancel or other button on the popover.

https://developer.apple.com/design/human-interface-guidelines/ios/views/popovers/

Another useful article to read: Pop-up, popover or popper? — a quick look into UI terms

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.