Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

primitive · popover

Native popover

Opt-in styles for declarative non-modal popovers with browser-owned visibility and light dismissal.

Install with npx @madojs/ui@latest add popover.

Primitive

Native popover

Resource cache

Inspect supporting resource details without leaving the current panel or making the page modal.

Background action

Composition

  • Connect an invoker with popovertarget to a native popover and keep its content non-modal; use dialog for modal work.

Public API

attribute popover
Native auto, manual or hint visibility and light-dismiss behavior.
attribute popovertarget / popovertargetaction
Declarative native invoker relationship.
class mado-ui-popover / invoker / dismiss
Surface and optional action hooks.
css-property --mado-ui-popover-position-area
Progressive CSS Anchor Positioning area.

Detected public classes

  • .mado-ui-popover
  • .mado-ui-popover-actions
  • .mado-ui-popover-content
  • .mado-ui-popover-description
  • .mado-ui-popover-dismiss
  • .mado-ui-popover-header
  • .mado-ui-popover-invoker
  • .mado-ui-popover-title

Detected public CSS properties

  • --mado-ui-color-border
  • --mado-ui-color-surface
  • --mado-ui-color-text
  • --mado-ui-color-text-muted
  • --mado-ui-popover-actions-gap
  • --mado-ui-popover-actions-justify
  • --mado-ui-popover-background
  • --mado-ui-popover-border
  • --mado-ui-popover-color
  • --mado-ui-popover-content-gap
  • --mado-ui-popover-description-color
  • --mado-ui-popover-gap
  • --mado-ui-popover-header-gap
  • --mado-ui-popover-inline-size
  • --mado-ui-popover-max-block-size
  • --mado-ui-popover-offset
  • --mado-ui-popover-padding
  • --mado-ui-popover-position-area
  • --mado-ui-popover-radius
  • --mado-ui-popover-shadow
  • --mado-ui-radius-md
  • --mado-ui-shadow-panel
  • --mado-ui-space-1
  • --mado-ui-space-2
  • --mado-ui-space-3
  • --mado-ui-space-4

Accessibility contract

  • Popover does not imply dialog semantics; author the role and accessible name required by its actual content.

Keyboard

  • The recipe adds no composite keyboard model; native interactive descendants keep their browser-defined keys and Tab order.

Focus

  • Focus remains on native links, buttons or controls. Presentational wrappers never become focusable.

Fallback

  • Without the copied stylesheet, the semantic source HTML remains readable and operable.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.