---
title: 'Tooltip'
type: 'component'
status: 'stable'
slug: /components/tooltip/
github: 'https://github.com/contentful/forma-36/tree/main/packages/components/tooltip'
storybook: 'https://f36-storybook.contentful.com/?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

```js static=true
import { Tooltip } from '@contentful/f36-components';
// or
import { Tooltip } from '@contentful/f36-tooltip';
```

## Examples

### Button with tooltip

```jsx file=./examples/ButtonWithTooltipExample.tsx

```

### Tooltips in Text

```jsx file=./examples/TooltipInTextExample.tsx

```

### Tooltip without wrapper (`withTriggerWrapper={false}`)

- Use `withTriggerWrapper={false}` to avoid rendering an additional wrapper element around the trigger.
- `withTriggerWrapper={false}` requires a single valid React element as `children`.
- `as` and `targetWrapperClassName` only apply when the trigger wrapper is enabled.
- If the trigger element is disabled, the tooltip will not be shown on hover in this mode.

```jsx file=./examples/WithoutTriggerWrapperTooltipExample.tsx

```

## Props (API reference)

<PropsTable of="Tooltip" />

## Content guidelines

- Use short and clear messages as the `Tooltip`’s content
- The Tooltip component allows you to pass React elements as content. However, this should be used with care. ReactElement as content is best suited for text formatting purposes. It should not be used for interactive elements like links, buttons, or form elements. Additionally, extensive images should be avoided, except for text-decorator icons that give semantic meaning to the text shown in the tooltip (e.g., warning signs or other relevant icons).
  - When using `ReactElement` as the content, it's recommended to use the `ScreenReaderOnly` component when displaying critical information.

## Accessibility

- Do not put essential information in `Tooltip` component
- Add unique `id` property to the tooltip, so appropriate a11y attributes could be used.

```jsx static=true
<Tooltip placement="top" id="tooltip" content="Hi I am a Tooltip">
  <TextLink>Hover me</TextLink>
</Tooltip>
```