Component size, gzipped: 27kb

Tooltip

Loading
API

Tooltips provide additional information upon hover or click. They often include contextual helper text to guide the user through the experience or provide more detail. Tooltips in Base have no arrow indicator and can be placed around any point of an object. Motion helps to reinforce its origin position.

Examples

Tooltip stateful example

You can use tooltips in many places, including inline text such as this. Tooltips are essentially just a Popover with a few style tweaks, so you can use all the features that Popover supports.

Tooltip stateful example with complex content

You can use tooltips in many places, including inline text such as this. Tooltips are essentially just a Popover with a few style tweaks, so you can use all the features that Popover supports.

API

Tooltip props

accessibilityType
enum
Controls how this popover behaves for screen readers and other assistive devices.
animateOutTime
number
Number of milliseconds used to fade out the popover.
autoFocus
boolean
If true, focus will shift to the first interactive element within the popover.
children
react node
The content that will trigger the popover.
content
function
The content of the popover.
focusLock
boolean
If true, focus will be locked to the popover contents.
ignoreBoundary
boolean
If true, popover element will not avoid element boundaries.
mountNode
string
Defines where to mount the popover.
onBlur
function
Called the onBlur event triggers.
onEsc
function
Called when ESC keypress triggers.
onFocus
function
Called the onFocus event triggers.
onMouseEnter
function
Called when mouseEnter triggers.
onMouseEnterDelay
number
Number of milliseconds to wait before showing the popover after mouse enters the trigger element.
onMouseLeave
function
Called when mouseLeave triggers.
onMouseLeaveDelay
number
Number of milliseconds to wait before showing the popover after mouse leaves the trigger element.
overrides
custom
Lets you customize all aspects of the component.
placement
enum
Controls how to position the popover relative to the target.
popperOptions
object
Popper options override https://popper.js.org/popper-documentation.html#Popper.Defaults.
returnFocus
boolean
If true, focus will shift back to the original element after popover closes. Set this to false if focusing the original element triggers the popover.
showArrow
boolean
If true, an arrow will be shown pointing from the popover to the trigger element.
triggerType
enum
Controls how to position the popover relative to the target.

Tooltip exports

You can import this module like so:

import {StatefulTooltip} from 'baseui/tooltip'

It exports the following components or utility functions:

  • StatefulTooltip
  • StatefulContainer
  • Tooltip
  • ACCESSIBILITY_TYPE
  • PLACEMENT
  • TRIGGER_TYPE
  • STATE_CHANGE_TYPE
  • StyledArrow
  • StyledBody
  • StyledInner