Popup
A Popup displays additional information on top of a page.

Types

Popup

An element can specify popup content to appear.

Header

An element can specify popup content with a header.

Trigger

A trigger can be complex element.

States

Disabled

A disabled popup only renders its trigger.

Pinned

Disables automatic repositioning of the component, it will always be placed according to the position value.

Variations

Basic

A popup can provide more basic formatting.

Position

A popup can be position around its trigger.

Flowing

A popup can have no maximum width and continue to flow to fit its content.

Size

A popup can vary in size.

Wide

A popup can be extra wide to allow for longer content.

Inverted

A popup can have its colors inverted.

Style

A popup accepts custom styles.

Usage

Offset

A popup position can be offset from its position.

We are using Popper.js for positioning, so you can use the offset prop as it described in their docs. Accepts the following units:

  • px or unit-less, interpreted as pixels
  • %, percentage relative to the length of the trigger element
  • %p, percentage relative to the length of the popup element
  • vw, CSS viewport width unit
  • vh, CSS viewport height unit
Popper.JS: offset

Actions

A popup can be triggered on hover, click, focus or multiple actions.

Nesting

A popup can be nested inside another.

Controlled

A popup can have its visibility controlled from outside.

Context

A popup can open over a DOM node when using a trigger.

A popup can open over a DOM node when controlled.

Hide on scroll

A popup can be hidden on a scroll event.

Default Open

A popup can appear open by default.

Popper Dependencies

A popup can have dependencies which update will schedule a position update. Should be used in cases when content is changing, behaves like dependencies in React Hooks.

This is the bottom