Flutter docs
Default skin

Tooltip

Simple text popup box.

When to use

  • The tip is shown on mouse enter, and is hidden on mouse leave. The Tooltip doesn't support complex text or operations.
  • To provide an explanation of a button/text/operation. It's often used instead of the html title attribute.

Examples

Basic

The simplest usage.

Placement

There are 12 placement options available.

Auto Shift

Auto adjust Popup and arrow position when Tooltip is close to the edge of the screen. Will be out of screen when exceed limitation.

Disabled

The Tooltip can be disabled by setting title={null} or title="".

Custom semantic dom styling

You can customize the semantic dom style of Tooltip by passing objects/functions through classNames and styles.

Smooth Transition

Configure Tooltip unique display through ConfigProvider global configuration to achieve smooth transition effects with only one Tooltip displayed at a time.

Arrow

Support show, hide or keep arrow in the center.

Colorful Tooltip

We preset a series of colorful Tooltip styles for use in different situations.

Wrap custom component

Use with a custom component.

API

Tooltip are exported from @ceebee/ui/client.

A supplementary tooltip must retain an existing field description on its trigger. The local runtime pins Ant's @rc-component/tooltip dependency to 1.5.2: 1.5.1 replaced the trigger's aria-describedby, disconnecting a Select from its hint. A regression spec checks the description before and after opening the tooltip. The workspace override controls this repository's dependency resolution; it is not a published override for a consuming application.

Tooltip

PropertyDescriptionTypeDefaultVersion
titleThe text shown in the tooltipReactNode | () => ReactNode--
colorThe background color. After using this attribute, the internal text color will adapt automaticallystring-5.27.0
classNamesSemantic DOM classRecord<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string>-5.23.0
stylesSemantic DOM styleRecord<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties>-5.23.0