Semantic UI React  

2.1.4 Popup   src/modules/Popup/Popup.js 

A Popup displays additional information on 
topSemantic
of a page.
UI Popup Docs
GitHub 

CHANGELOG 

Props Popup Popup.Content Popup.Header

Getting Started
Introduction A Popup displays additional information on top of a page.
Get Started

Composition
Name
Shorthand Props

Theming
Default

Layout examples Type

Prototypes Description
Migration guide to v2

 as 
Press "/" to filter components 
{elementType}
Elements An element type to render as (string or function).
Button

Container
 basic 
Divider

Flag {bool}
Header Display the popup without the pointing arrow.
Icon

Image
 children 
Input

Label
{node}

List Primary content.

Loader

Placeholder  className 
Rail
{string}
Reveal
Additional classes.
Segment

Step
 content 

Collections
{custom}
Breadcrumb
Simple text content for the popover.
Form

Grid
 context 
Menu

Message {object|custom}
Table Existing element the pop-up should be bound to.

Views
 disabled 
Advertisement
 false 
Card

Comment {bool}

Feed A disabled popup only renders its trigger.

Item

Statistic  eventsEnabled 

 true 
Modules
{bool}
Accordion
Enables the Popper.js event listeners.
Checkbox

Dimmer

Dropdown  flowing 

Embed
{bool}
Modal
A flowing Popup has no maximum width and continues to flow to fit its content.
Popup

Progress
 header 
Rating

Search {custom}
Sidebar Header displayed above the content in bold.
Sticky

Tab
 hideOnScroll 
Transition
{bool}
Behaviors Hide the Popup when scrolling the window.
Visibility

 hoverable 
Addons
Confirm
{bool}

Pagination Whether the popup should not close on hover.

Portal

Radio  inverted 
Ref
{bool}
Select
Invert the colors of the Popup.
Text Area

Transitionable Portal
 offset 

{func|arrayOf}
Offset values in px unit to apply to rendered popup. 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.

 on 

 ['click', 'hover'] 

{enum|arrayOf}
Events triggering the popup.

Enums:
 hover  click  focus 

 onClose 

{func}
Called when a close event happens.

onClose(event: SyntheticEvent, data: object)

 event  React's original SyntheticEvent.
 data  All props.

 onMount 

{func}
Called when the portal is mounted on the DOM.

 onOpen 

{func}
Called when an open event happens.

onOpen(event: SyntheticEvent, data: object)

 event  React's original SyntheticEvent.
 data  All props.

 onUnmount 

{func}
Called when the portal is unmounted from the DOM.

 pinned 

 false 

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

 popper 

{custom}
A wrapping element for an actual content that will be used for positioning.

 popperDependencies 

{array}
A popup can have dependencies which update will schedule a position update.

 popperModifiers 

 [] 

{array}
An array containing custom settings for the Popper.js modifiers.

 position 

 'top left' 

{enum}
Position for the popover.

Enums:
 top center  top left  top right  bottom center  bottom left 
 bottom right  right center  left center 

 positionFixed 

{bool}
Tells `Popper.js` to use the `position: fixed` strategy to position the popover.

 size 

{enum}
Popup size.

Enums:
 mini  tiny  small  large  huge 

 style 

{object}
Custom Popup style.

 trigger 

{node}
Element to be rendered in-place where the popup is defined.

 wide 

{bool|enum}
Popup width.

Enums:
 very 

TYPES Types


States


Variations

Popup
Usage

An element can specify popup content to appear.
  
Try it CodeSandbox Maximize Permalink

Header
An element can specify popup content with a header.
  
Try it CodeSandbox Maximize Permalink

Trigger
A trigger can be complex element.
  
Try it CodeSandbox Maximize Permalink

My Neighbor Totoro
Two sisters move to the country with their
father in order to be closer to their
hospitalized mother, and discover the
surrounding trees are inhabited by magical
spirits.

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 

Get 10 Free Images From Adobe Stock.

Start Now. ads via Carbon
Blazing deployments by Vercel.