README
title: 'Tooltip' type: 'component' status: 'stable' slug: /components/tooltip/ github: 'https://github.com/contentful/forma-36/tree/master/packages/components/tooltip' storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/components-tooltip--basic' typescript: ./src/Tooltip.tsx
Tooltips are very useful to communicate extra information related to an element on the screen. The information should be contextual, useful, and nonessential.
Import
import { Tooltip } from '@contentful/f36-components';
// or
import { Tooltip } from '@contentful/f36-tooltip';
Examples
Button with tooltip
Tooltips in Text
Props (API reference)
Content guidelines
- 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>