Edit this page
[?] Component size, gzipped: 110kb

Tooltip

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.

Overrides

Additionally, you can fully customize any part of the Tooltip through the overrides prop. The Tooltip consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

hover over me

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

API

Stateful Tooltip API

accessibilityType $Keys<typeof ACCESSIBILITY_TYPE> =

Controls how this popover behaves for screen readers and other assistive devices. See the A11Y section at the bottom of this document for more details.

$Keys{ none: "none", menu: "menu", tooltip: "tooltip" }

"data-baseweb" string

id string

ignoreBoundary boolean = false

If true, popover element will not avoid element boundaries.

onMouseEnterDelay number = 200

Number of milliseconds to wait before showing the popover after mouse enters the trigger element (for triggerType hover).

onMouseLeaveDelay number = 200

Number of milliseconds to wait before showing the popover after mouse leaves the trigger element (for triggerType hover).

onClick function

Handler for click events on trigger element.

Event => mixed

overrides object = {}

Body { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
$arrowOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$isAnimating boolean required
$isOpen boolean required
$popoverOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$showArrow boolean required
Arrow { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
$arrowOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$isAnimating boolean required
$isOpen boolean required
$popoverOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$showArrow boolean required
Inner { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>
$arrowOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$isAnimating boolean required
$isOpen boolean required
$popoverOffset required
top number required
left number required
$placement required $Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }
$showArrow boolean required

placement $Keys<typeof TETHER_PLACEMENT> =

How to position the popover relative to the target.

$Keys{ auto: "auto", topLeft: "topLeft", top: "top", topRight: "topRight", rightTop: "rightTop", right: "right", rightBottom: "rightBottom", bottomRight: "bottomRight", bottom: "bottom", bottomLeft: "bottomLeft", leftBottom: "leftBottom", left: "left", leftTop: "leftTop" }

showArrow boolean = false

Whether or not to show the arrow pointing from the popover to the trigger.

triggerType $Keys<typeof TRIGGER_TYPE> =

Whether to toggle the popover when trigger is clicked or hovered.

$Keys{ click: "click", hover: "hover" }

mountNode HTMLElement

Where to mount the popover

HTMLElement

animateOutTime number

How long should be fade out animation in ms, default 0ms

popperOptions any

Popper options override https://popper.js.org/popper-documentation.html#Popper.Defaults eslint-disable-next-line flowtype/no-weak-types

children Node required

Content that should trigger the popover to be shown (also acts as the anchor against which the popover will be positioned).

Node

content union required

Content to render within the popover when it's shown.

One of
Node,
=> Node

isOpen boolean required

Whether or not to show the popover.

onBlur function

Handler for blur events on trigger element.

() => mixed

onClickOutside function

Handler for clicks outside the anchor/popover elements.

MouseEvent => mixed

onEsc function

Handler for click events on trigger element.

() => mixed

onFocus function

Handler for 'Esc' keypress events

() => mixed

onMouseEnter function

Handler for mouseenter events on trigger element.

() => mixed

onMouseLeave function

Handler for mouseleave events on trigger element.

() => mixed

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