Popover

Popover sits on the same overlay primitives as Menu and Tooltip, making it suitable for interactive content like forms, lists, and quick action menus while keeping focus management predictable.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽⁴⁾

Properties

⁽⁵⁹⁾

Playground

Basic Usage

Popover targets wrap an interactive element and render dropdown content within Popover.Dropdown.

Loading demo…

import
 
{
 
Block
,
 
Button
,
 
Popover
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Popover
>
      
<Popover.Target
>
        
<Button
>
          
Toggle
 popover
        
</Button
>
      
</Popover.Target
>
      
<Popover.Dropdown
>
        
<Block
 
p
=
"sm"
 
style
=
{
{
 maxWidth
:
 
240
 
}
}
>
          
<Text
 
weight
=
"semibold"
>
Quick
 actions
</Text
>
          
<Text
 
variant
=
"small"
 
color
=
"secondary"
>
            
Popovers
 expose more content than tooltips without leaving the page
.
          
</Text
>
          
<Button
 
size
=
"xs"
 
variant
=
"ghost"
>
            
Create
 
new
 entry
          
</Button
>
          
<Button
 
size
=
"xs"
 
variant
=
"ghost"
>
            
View
 documentation
          
</Button
>
        
</Block
>
      
</Popover.Dropdown
>
    
</Popover
>
  
)
;
}

Hover Trigger

Set trigger="hover" to open the popover when the user hovers over the target element. This is useful for mouse users who want quick access to additional content without clicking.

Loading demo…

import
 
{
 
Block
,
 
Button
,
 
Popover
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Popover
 
trigger
=
"hover"
>
      
<Popover.Target
>
        
<Button
>
          
Hover
 over me
        
</Button
>
      
</Popover.Target
>
      
<Popover.Dropdown
>
        
<Block
 
p
=
"sm"
 
style
=
{
{
 maxWidth
:
 
240
 
}
}
>
          
<Text
 
weight
=
"semibold"
>
Hover
 popover
</Text
>
          
<Text
 
variant
=
"small"
 
color
=
"secondary"
>
            
This
 popover opens on hover
,
 ideal 
for
 mouse users who want quick access to additional content
.
          
</Text
>
        
</Block
>
      
</Popover.Dropdown
>
    
</Popover
>
  
)
;
}

Controlled State

Control the opened prop and respond to onChange when the popover needs to sync with surrounding form state.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
Button
,
 
Checkbox
,
 
Input
,
 
Popover
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
opened
,
 setOpened
]
 
=
 
useState
(
false
)
;
  
const
 
[
email
,
 setEmail
]
 
=
 
useState
(
'team@example.com'
)
;
 
  
return
 
(
    
<Block
>
      
<Checkbox
        
label
=
"Show popover"
        
checked
=
{
opened
}
        
onChange
=
{
setOpened
}
      
/>
      
<Popover
 
opened
=
{
opened
}
 
onChange
=
{
setOpened
}
 trapFocus
>
        
<Popover.Target
>
          
<Button
>
            
Invite
 teammate
          
</Button
>
        
</Popover.Target
>
        
<Popover.Dropdown
>
          
<Block
 
p
=
"sm"
 
>
            
<Text
 
weight
=
"semibold"
>
Invite
 team member
</Text
>
            
<Input
              
label
=
"Email"
              
placeholder
=
"name@example.com"
              
value
=
{
email
}
              
onChangeText
=
{
setEmail
}
              
size
=
"sm"
              fullWidth
            
/>
            
<Button
 
size
=
"xs"
 
onPress
=
{
(
)
 
=>
 
setOpened
(
false
)
}
>
              
Send
 invite
            
</Button
>
          
</Block
>
        
</Popover.Dropdown
>
      
</Popover
>
    
</Block
>
  
)
;
}

Placement Options

Set the position prop to control where the dropdown renders relative to its trigger.

Loading demo…

import
 
{
 
Button
,
 
Block
,
 
Popover
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 
OPTIONS
 
=
 
[
  
{
 label
:
 
'Top'
,
 position
:
 
'top'
,
 description
:
 
'Appears above the trigger.'
 
}
,
  
{
 label
:
 
'Right'
,
 position
:
 
'right'
,
 description
:
 
'Anchors to the right edge.'
 
}
,
  
{
 label
:
 
'Bottom'
,
 position
:
 
'bottom'
,
 description
:
 
'Drops below the trigger.'
 
}
,
  
{
 label
:
 
'Left'
,
 position
:
 
'left'
,
 description
:
 
'Anchors to the left edge.'
 
}
,
]
 as 
const
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Block
 
direction
=
"row"
>
      
{
OPTIONS
.
map
(
(
{
 label
,
 position
,
 description 
}
)
 
=>
 
(
        
<Popover
 
key
=
{
position
}
 
position
=
{
position
}
 withArrow
>
          
<Popover.Target
>
            
<Button
>
              
{
label
}
            
</Button
>
          
</Popover.Target
>
          
<Popover.Dropdown
>
            
<Block
 
p
=
"sm"
 
style
=
{
{
 maxWidth
:
 
220
 
}
}
>
              
<Text
 
weight
=
"semibold"
>
{
label
}
 placement
</Text
>
              
<Text
 
variant
=
"small"
 
color
=
"secondary"
>
                
{
description
}
              
</Text
>
            
</Block
>
          
</Popover.Dropdown
>
        
</Popover
>
      
)
)
}
    
</Block
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/Popover

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap