Coral is a thoroughly developed design system widely adopted by developers and designers for creating beautiful and user-friendly Sea internal products.
Copyright © 2018-2025 Sea Labs
Tooltip
Designer doc
Tooltips appear on hover, focus, or touch, and disappear after blur, mouse and touch leave, and click - including the keyboard handlers. On click, tooltips exit immediately.
Tooltip with similar behaviour can be found in:
- macOS push button
- Google Apps on Web (Calendar, Mail)
- Chrome
- Spotify
- HTML element title
Example
Basic Usage
View code
Placements
Internally, Tooltip reexposes placement API from Tip component.
View code
Variants
By default, Coral Tooltip uses dark background. You can pass TooltipVariants.Light to variant prop to make it light.
View code
Open and Close Delay
Tooltip’s open and close events can be delayed by setting openDelay and closeDelay props.
View code
Custom Events
Unlike Ant Design’s Popovers, this Tooltip does not provide special prop trigger, because it’s rather unnecessary and too specific.
Alternatively, any events triggering the tooltip can be defaultPrevented, controlled fully or partially based on onActiveChange callback.
Controlled
View code
If you control it into hover only events, note that it might have accessibility issue because keyboard users won’t be able to see it.
Using .preventDefault()
You can also use uncontrolled way. But, this is less recommended because you will need to understand and have more couplings between the internal state changes and your app. Prop initialActive is also supported.
View code
Tooltip with Balloon
Using Tooltip with Balloon on an element is not very straightforward. This is a tradeoff with the ease of use of each individually. However, here’s a way to get around the implementation using forwardRef:
View code
Custom child rendering
To make Tooltip component compatible with various kinds of child elements, you might need to customize the props passed to child element, renderChild will give you the flexibility to do so. You are encouraged to use cloneElement to return the child element.
View code
Relevant components
References
- WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
- Reach-UI: https://reacttraining.com/reach-ui/tooltip/
- Material Design: https://material.io/components/tooltips/#usage
API
Tooltip
| Prop name | Type | Default | Description |
|---|---|---|---|
| active | boolean | ||
| arrow | ArrowProps | ||
| as | any | Tag or component, but a simple tag (i.e. built-in components, e.g. div, span) is recommended. | |
| closeDelay | number | ||
| container | HTMLElement | configs.getPortalContainer('Tooltip', 'container') | |
| immediate | boolean | ||
| initialActive | boolean | ||
| initialImmediate | boolean | ||
| offset | [number, number] | [0, 3] | |
| onActiveChange | (active: boolean) => void | ||
| onImmediateChange | (immediate: boolean) => void | ||
| openDelay | number | ||
| placement | "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "left-start" | "left-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | top | |
| popperOptions | PopperPopperOptions | Options for Popper.js instance | |
| popperUpdateKey | string | ||
| renderChild | (child: any, handlers: any, ariaAttrs: any) => ReactNode | (child, handlers, ariaAttrs) => cloneElement(child, { ...handlers, ...ariaAttrs }) | |
| springConfig | Partial<AnimationConfig> | { tension: 720, mass: 0.5 } | |
| title | ReactNode | ||
| titleContainerProps | HTMLAttributes<HTMLDivElement> | ||
| variant | TooltipVariants | dark |