Tooltip

auto
Selected auto.
open

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.

Tooltip size variants

You can use different size variants according to your need medium size variant and large size variant.

Tooltip with Label

You can add label on top of Tooltip tooltip with label

Tooltip intent example

You can use tooltips with different intents such as ai variant and default variant

API

Tooltip props

NameTypeDefaultDescription
accessibilityType
'none'| 'menu'| 'tooltip'
tooltipControls how this popover behaves for screen readers and other assistive devices.
animateOutTime
number
Number of milliseconds used to fade out the popover.
children
react node
The content that will trigger the popover.
content
react node
The content of the popover.
ignoreBoundary
boolean
If true, popover element will overflow outside anchor's scrollParent.
intent
'default'| 'ai'
defaultDefines the intent of the tooltip
label
react node
To display label on top of tooltip content.
mountNode
object
Defines where to mount the popover.
onBlur
function
Called the onBlur event triggers.
onClose
function
Called when the Popover clsoes.
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.
onOpen
function
Called when the Popover opens.
overrides
custom
Lets you customize all aspects of the component.
placement
'auto'| 'topLeft'| 'top'| 'topRight'| 'rightTop'| 'right'| 'rightBottom'| 'bottomRight'| 'bottom'| 'bottomLeft'| 'leftBottom'| 'leftBottom'| 'leftBottom'
autoControls how to position the popover relative to the target.
popperOptions
object
Popper options override https://popper.js.org/popper-documentation.html#Popper.Defaults.
positionFixed
boolean
falseuses the position fixed, left and top properties instead of transform to adjust the popover.
renderAll
boolean
falseRenders all popover content for SEO purposes regardless of popover isOpen state.
repositionOnResize
boolean
Reposition popover whenever dimension of popup content or targetElement changes.
showArrow
boolean
trueIf true, an arrow will be shown pointing from the popover to the trigger element.
size
'sm'| 'md'| 'lg'
smDefines the size of the Tooltip.
targetElement
react node
By default Popover assumes children to be targetElement. targetElement can be used to provide custom targetElement.
triggerType
'click'| 'hover'
hoverControls how to position the popover relative to the target.
viewportAsBoundary
boolean
trueBy default, tooltip content will try to render inside scrollParent of target element. If true, content will overflow outside scrollParent but will remain inside viewport. https://popper.js.org/docs/v1/#preventoverflowboundarieselement

You can check the implementation of the component for more details.

Tooltip exports

You can import this module like so:

import {DisabledTooltipContainer} from 'spaceweb/tooltip'

It exports the following components or utility functions:

  • DisabledTooltipContainer
  • StatefulTooltip
  • StatefulTooltipContainer
  • StyledArrow
  • StyledBody
  • StyledInner
  • Tooltip