Semantic UI React  3.0.0-beta.2
GitHub CHANGELOG
Getting Started
IntroductionGet StartedCompositionShorthand PropsThemingLayout examplesPrototypesMigration guide to v3
Elements
ButtonContainerFlagHeaderDividerImageIconLabelInputListLoaderPlaceholderRailRevealSegmentStep
Collections
FormGridMessageMenuTableBreadcrumb
Views
AdvertisementCardCommentFeedItemStatistic
Modules
AccordionCheckboxDimmerEmbedModalDropdownPopupProgressRatingSearchSidebarStickyTransitionTab
Addons
PaginationConfirmPortalRadioSelectText AreaTransitionable Portal

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

src/modules/Popup/Popup.js
Semantic UI Popup Docs
PopupPopup.ContentPopup.Header

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. The basic offset accepts an array with two numbers in the form [skidding, distance].

  • skidding displaces the Popup along the reference element
  • distance displaces the Popup away from, or toward, the reference element in the direction of its placement. A positive number displaces it further away, while a negative number lets it overlap the reference
Popper.JS: offset

Offset as a function

A popup position can accept computed offset via functions

It's preferred to define offset as a tuple of values, however it's also possible to use functions for more complex scenarios. In this example, we are applying half the Popup's height as margin between the two elements only when the popper is positioned below its reference element.
Popper.JS: offset

eventsEnabled

Enables the Popper.js event listeners.

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.

popper element

From semantic-ui-react@2.0.0 we are using an additional wrapping element around Popup for positioning, see Semantic-Org/Semantic-UI-React#3947 for more details. To pass props to this element popper shorthand can be used.

Positioning via position: fixed

If your reference element is in a fixed container, use positionFixed. This will prevent any jumpiness since no repositioning is needed.

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.

Context Menu

A popup can open over a DOM node as used as a context menu.

Hide on scroll

A popup can be hidden on a scroll event.

Default Open

A popup can appear open by default.

Delay

A popup can have delay in showing and hiding. This avoids accidental popup visibility.

This is the bottom
Blazing deployments by Vercel.