Semantic UI React  1.0.0
GitHub CHANGELOG
Getting Started
IntroductionGet StartedCompositionShorthand PropsThemingLayout examplesPrototypes
Elements
ButtonContainerDividerFlagIconHeaderImageInputLabelListLoaderPlaceholderRailRevealSegmentStep
Collections
BreadcrumbFormGridMenuMessageTable
Views
AdvertisementCardCommentFeedItemStatistic
Modules
AccordionCheckboxDimmerDropdownEmbedModalPopupProgressRatingSearchSidebarStickyTabTransition
Behaviors
Visibility
Addons
ConfirmMount NodePaginationPortalRadioResponsiveSelectText 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. 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

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.

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.

Delay

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

This is the bottom