Tooltip
Tooltips are very useful to communicate extra information related to an element on the screen. The information should be contextual, useful, and nonessential.
How to use Tooltip
- Even though it's possible to pass any ReactNode as a content of the Tooltip,
we do not recommend passing very complex components try to use only Phrasing content
Code examples
<Tooltip
placement="top"
id="tip1"
targetWrapperClassName="targetWrapperClassName"
content="Hi I am a Tooltip"
>
<TextLink>Hover me</TextLink>
</Tooltip>
Content recommendations
- Use short and clear messages as the Tooltip’s content
Accessibility
- Do not put essential information in
Tooltip
component - Add unique
id
property to the tooltip, so appropriate a11y attributes could be used.
<Tooltip placement="top" id="tooltip" content="Hi I am a Tooltip">
<TextLink>Hover me</TextLink>
</Tooltip>
Props
import { Props } from '@contentful/f36-docs-utils';