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
EllipsisTooltip
Designer doc
Ellipsis Tooltip will help user to automatically apply ellipsis to when its too long and display the original text in Tooltip.
Example
Basic Usage
When content inside tooltip overflows, content will show as ellipsis, when user hover on the content, full content will show in the tooltip
View code
MaxRows
maxRows prop is available to control the maxRows of the content
View code
Multiple Elements
When multiple multi-line elements need to be passed in, use BaseEllipsisTooltip and EllipsisOverflow to customise the maxRows for each child element.
View code
Relevant components
API
BaseEllipsisTooltip
| 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 | ||
| containerProps | InnerProps | ||
| immediate | boolean | ||
| initialActive | boolean | ||
| initialImmediate | boolean | ||
| offset | [number, number] | ||
| onActiveChange | (active: boolean) => void | ||
| onImmediateChange | (immediate: boolean) => void | ||
| onOverflowChange | (overflow: boolean) => void | ||
| openDelay | number | ||
| overflow | boolean | ||
| 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 | ||
| renderChild | (child: any, handlers: any, ariaAttrs: any) => ReactNode | ||
| springConfig | Partial<AnimationConfig> | ||
| title | ReactNode | ||
| titleContainerProps | HTMLAttributes<HTMLDivElement> | ||
| variant | TooltipVariants | dark |
EllipsisOverflow
| Prop name | Type | Default | Description |
|---|---|---|---|
| contentProps | InnerProps | ||
| maxRows | number | 1 |
EllipsisTooltip
| 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 | ||
| containerProps | InnerProps | ||
| contentProps | InnerProps | ||
| immediate | boolean | ||
| initialActive | boolean | ||
| initialImmediate | boolean | ||
| maxRows | number | 1 | |
| offset | [number, number] | ||
| onActiveChange | (active: boolean) => void | ||
| onImmediateChange | (immediate: boolean) => void | ||
| onOverflowChange | (overflow: boolean) => void | ||
| openDelay | number | ||
| overflow | boolean | ||
| 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 | ||
| renderChild | (child: any, handlers: any, ariaAttrs: any) => ReactNode | ||
| springConfig | Partial<AnimationConfig> | ||
| title | ReactNode | ||
| titleContainerProps | HTMLAttributes<HTMLDivElement> | ||
| variant | TooltipVariants |