UI - Popover


A popover is a overlay graphic element

  • that shows up (pops) over the actual graphic elements
  • when the user makes an active action on an interactive/control element such as:
  • that allows interaction with its content

It's associated to the interactive element and appears then near it.

An arrow generally points to the interactive/control element.

A tooltip is a sort of popover but it does not:

  • requiert an active interaction (based on the mouse position)
  • allow interaction with its content (the tooltip goes away when the mouse goes away)


With javascript, the popper library helps you create popover.

Discover More
Firebug Z Index
CSS - z-index property (Layout third axis or Overlap order)

in CSS. Usage: set the z-index on the outermost parent The z-index property applies only to positioned element. It means that the position property should not be static (the default, ie...
Color Autocompletion List
How to create an Autocompletion functionality with CSS, Javascript and HTML

This article shows you how to create a search box with an autocompletion feature
Card Puncher Data Processing
UI - Dialog

dialog is a overlay window (floating element) that requires immediate attention, appearing over the page content and blocking interactions with the page until it is dismissed through an action....
Card Puncher Data Processing
UI - Overlay

An overlay component is a component that comes above the actual components in a absolute position. In Html, it would have a higher value on the z scale (ie z-index) When two elements overlay each other,...
UI - Tooltip

A tooltip is a sort of popover that: opens when the mouse is hovering over a target element closes when the mouse is leaving the target element It does not: requiert an active interaction (based...
Web UI - Popper library (tooltip and popover positioning)

popper is a positional library that position tooltips and popovers popper is now floating-ui It also makes sure that the positioned element never end up off screen or cropped by an overflow. (Resizing...

Share this page:
Follow us:
Task Runner