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
Tip
Utility component wrapping Floating UI, which is used for Tooltip, Balloon, and probably many more.
Tip is a fully controlled component. That means you need to pass active prop. It’s different from most components that apply Control Props Pattern because Tip doesn’t have any internal event triggering the changes.
Tip mostly handles animation transitions and arrow styles, and has minimum content stylings and no spring configs.
Example
Basic Usage
Below might look complicated for basic usage, but it’s how you might always use it because it’s a controlled component (though you probably want to use Tooltip instead).
View code
Placements
You can specify where the Tip is displayed through placement prop.
View code
Customizing Arrows
Arrow color can be specified through arrow.color prop.
View code
You can hide the arrow by passing null.
View code
Relevant components
API
Tip
| 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. | |
| container | HTMLElement | configs.getPortalContainer('Tip', 'container') | |
| content | ReactNode | ||
| immediate | boolean | ||
| offset | [number, number] | ||
| placement | "left" | "right" | "bottom" | "top" | "top-start" | "top-end" | "left-start" | "left-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | ||
| popperOptions | PopperPopperOptions | Options for Popper.js instance | |
| popperUpdateKey | string | ||
| springConfig | Partial<AnimationConfig> |