Tooltip

Tooltip provides contextual information without disrupting the user's workflow. It supports multiple trigger events, smart positioning, and accessibility features for an inclusive experience.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽⁴⁾

Properties

⁽¹⁷⁾

Playground

Advanced

title: Advanced Tooltip Features description: Advanced tooltip options including delays, wrapped labels, width control, and the object form of the tooltip prop. tags: ["advanced", "delays", "wrapping", "maxWidth", "controlled", "custom-color", "width"]

title: Delays and Content category: behavior order: 40 tags: [delays, wrapping] highlightLines: [11-44] status: stable since: 1.0.0 hidden: false

Tune openDelay/closeDelay to reduce flicker. Long labels wrap on their own — use maxWidth to move the wrap point, width for a fixed bubble, or lineClamp to truncate on purpose.

Loading demo…

import
 
{
 
Block
,
 
Button
,
 
Card
,
 
Text
,
 
Tooltip
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Card
 
p
=
"md"
>
      
<Block
>
        
<Block
>
          
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
            
Add
 open and close delays to avoid flicker when the pointer briefly leaves the trigger
.
          
</Text
>
          
<Tooltip
 
label
=
"Opens after 400ms"
 
openDelay
=
{
400
}
 
closeDelay
=
{
200
}
>
            
<Button
 
size
=
"sm"
 
variant
=
"outline"
>
              
Delayed
 tooltip
            
</Button
>
          
</Tooltip
>
        
</Block
>
        
<Block
>
          
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
            
Long
 labels wrap automatically
.
 
Tighten
 or widen the wrap point with 
`maxWidth`
.
          
</Text
>
          
<Tooltip
            
label
=
"This tooltip wraps across multiple lines so you can surface longer instructions without truncation."
            
maxWidth
=
{
220
}
            withArrow
          
>
            
<Button
 
size
=
"sm"
>
              
Wrapped
 tooltip
            
</Button
>
          
</Tooltip
>
        
</Block
>
        
<Block
>
          
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
            
Components
 with a 
`tooltip`
 prop take a 
string
,
 or an 
object
 to pass 
any
 
Tooltip
 option
.
          
</Text
>
          
<Button
            
size
=
"sm"
            
variant
=
"outline"
            
tooltip
=
{
{
              label
:
 
'The object form forwards straight to Tooltip, so you can widen the bubble or add an arrow.'
,
              maxWidth
:
 
320
,
              position
:
 
'right'
,
              withArrow
:
 
true
            
}
}
          
>
            
Tooltip
 via prop
          
</Button
>
        
</Block
>
      
</Block
>
    
</Card
>
  
)
;
}

Basic

title: Basic Tooltip description: Simple tooltip display on hover/press with different trigger events. tags: ["basic", "events", "hover", "focus", "touch", "triggers"]

title: Basic Usage category: usage order: 10 tags: [tooltip] highlightLines: [9-15] status: stable since: 1.0.0 hidden: false

Wrap a control in Tooltip to display concise helper text on hover, focus, or touch.

Loading demo…

import
 
{
 
Block
,
 
Button
,
 
Card
,
 
Text
,
 
Tooltip
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Card
 
p
=
"md"
>
      
<Block
 
align
=
"flex-start"
>
        
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
          
Wrap
 interactive elements with 
`Tooltip`
 to introduce short helper text
.
        
</Text
>
        
<Tooltip
 
label
=
"Invite teammates"
 withArrow
>
          
<Button
 
size
=
"sm"
 
variant
=
"outline"
>
            
Invite
 teammates
          
</Button
>
        
</Tooltip
>
      
</Block
>
    
</Card
>
  
)
;
}

Positions

title: Tooltip Positions description: Different positioning options for tooltips with smart edge detection and arrow indicators. tags: ["positions", "positioning", "arrows", "edge-detection", "alignment"]

title: Positions category: behavior order: 30 tags: [positioning] highlightLines: [12-31] status: stable since: 1.0.0 hidden: false

Set position to top, bottom, left, or right to anchor the tooltip relative to its trigger.

Loading demo…

import
 
{
 
Block
,
 
Button
,
 
Card
,
 
Row
,
 
Text
,
 
Tooltip
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Card
 
p
=
"md"
>
      
<Block
>
        
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
          
Pass
 a 
`position`
 value to choose where the tooltip appears
.
        
</Text
>
        
<Row
 
gap
=
"md"
 
justify
=
"center"
 
wrap
=
"wrap"
>
          
<Tooltip
 
label
=
"Appears above the target"
 
position
=
"top"
 withArrow
>
            
<Button
 
size
=
"sm"
 
variant
=
"outline"
>
              
Top
            
</Button
>
          
</Tooltip
>
          
<Tooltip
 
label
=
"Appears below the target"
 
position
=
"bottom"
 withArrow
>
            
<Button
 
size
=
"sm"
 
variant
=
"outline"
>
              
Bottom
            
</Button
>
          
</Tooltip
>
          
<Tooltip
 
label
=
"Anchors to the left"
 
position
=
"left"
 withArrow
>
            
<Button
 
size
=
"sm"
 
variant
=
"outline"
>
              
Left
            
</Button
>
          
</Tooltip
>
          
<Tooltip
 
label
=
"Anchors to the right"
 
position
=
"right"
 withArrow
>
            
<Button
 
size
=
"sm"
 
variant
=
"outline"
>
              
Right
            
</Button
>
          
</Tooltip
>
        
</Row
>
      
</Block
>
    
</Card
>
  
)
;
}

Simple

title: Simple Tooltip description: Basic tooltip demonstration with different positions, arrows, and multiline text. tags: ["simple", "basic", "positions", "arrow", "multiline"]

title: Trigger Modes category: behavior order: 20 tags: [events, interaction] highlightLines: [13-33] status: stable since: 1.0.0 hidden: false

Configure the events prop to decide whether tooltips appear on hover, focus, or touch interactions.

Loading demo…

import
 
{
 
Block
,
 
Button
,
 
Card
,
 
Row
,
 
Text
,
 
Tooltip
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
return
 
(
    
<Card
 
p
=
"md"
>
      
<Block
>
        
<Text
 
size
=
"sm"
 
color
=
"secondary"
>
          
Adjust
 the 
`events`
 prop to control which interactions display the tooltip
.
        
</Text
>
        
<Block
>
          
<Row
 
gap
=
"sm"
 
align
=
"center"
>
            
<Tooltip
 
label
=
"Default hover and focus behavior"
>
              
<Button
 
size
=
"sm"
>
Hover
 or focus
</Button
>
            
</Tooltip
>
          
</Row
>
          
<Row
 
gap
=
"sm"
 
align
=
"center"
>
            
<Tooltip
              
label
=
"Only appears when the button receives focus"
              
events
=
{
{
 hover
:
 
false
,
 focus
:
 
true
,
 touch
:
 
false
 
}
}
            
>
              
<Button
 
size
=
"sm"
 
variant
=
"outline"
>
                
Focus
 only
              
</Button
>
            
</Tooltip
>
          
</Row
>
          
<Row
 
gap
=
"sm"
 
align
=
"center"
>
            
<Tooltip
              
label
=
"Shows on touch interactions"
              
events
=
{
{
 hover
:
 
false
,
 focus
:
 
false
,
 touch
:
 
true
 
}
}
            
>
              
<Button
 
size
=
"sm"
 
variant
=
"ghost"
>
                
Touch
 only
              
</Button
>
            
</Tooltip
>
          
</Row
>
        
</Block
>
      
</Block
>
    
</Card
>
  
)
;
}

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

</>

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