I am a web developer building this component (the white rounded square)
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.
How would you name this category of UI component?
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.
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.
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.
Another useful article to read: Pop-up, popover or popper? — a quick look into UI terms