Tooltip

This displays additional, floating labels on hover or tap to explain an interface element or feature.

Basic Usage


import { Tooltip } from '@krakentech/coral';
 
<Tooltip />

With Children


<Tooltip title="Take me to my account">
    <Stack alignItems="center">
        <IconAccount />
        <Typography>My account</Typography>
    </Stack>
</Tooltip>

Properties

placement


<Tooltip placement="right" />

theme


<Tooltip theme="base900" />

title


<Tooltip title="Custom title" />

zIndex


<Tooltip zIndex={100} />

Responsiveness


<Tooltip theme={{ base: "base100", lg: "base900" }} />

Full API

Name	Type	Default
`attributes`	`Attributes` This prop can be used to pass HTML attributes directly to the component. We currently allow passing `data-` and `aria-` attributes and the `id`. However, you can pass anything else with a type hack if necessary since this object is despread in to the component, without filtering its content. Example usage: `AttributesProps: { 'id': 'close-button', 'aria-label': 'Close button', 'data-testid': 'close-button' };`
`placement`	`Placement` Deprecated: This prop is no longer used and will be removed in a later release. The tooltip is now positioned automatically and will use a “most space” strategy, positioning itself where there is the most space in the viewport.
`title`	`string` The content of the tooltip, which will be displayed when the user hovers over the target element.	`Tooltip`
`theme`	`ResponsiveVariant<"base300" \| "base100" \| "base900" \| "none">` The colourway applied to this component.	`base300`
`zIndex`	`number` The z-index of the tooltip popup.	`30`
`children`	`ReactNode`

Design

Good to know

Insert a tooltip when additional informative text is useful, this will be paired with a nearby associated element, usually an icon. Tooltip text should include short, descriptive text.

Text limit? The tooltip explainer should not exceed 150 characters

Customisation

Our tooltip component offers a couple of variations you can play with, including two icon styles:

Filled
Outline