> For the complete documentation index, see [llms.txt](https://dosomething.gitbook.io/phoenix-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dosomething.gitbook.io/phoenix-documentation/development/features/tooltip.md).

# Tooltip

## Overview

The `Tooltip` utility component will display a tooltip adjacent to a 'target' element, triggered by user interaction:

### Large Screens

**Hover**: The tooltip will be triggered by hovering over the target. Once the user unhovers, the tooltip will disappear after 1 second. But if the user hovers over the tooltip content, the tooltip won't disappear until they've unhovered the content.

**ENTER**: For accessiblity, the tooltip target can be 'focused' (via TABBING through to the element), and when ENTER is clicked, the tooltip content will appear.

### Small Screens

**Click**: For mobile / touchscreen devices, the tooltip will be triggered via clicking the tooltip target. The tooltip content will disappear when the user scrolls.

## Usage Instructions

The `Tooltip` component expects a `tooltipContent` prop (text or JSX) with the content appearing within the tooltip. The tooltip target content should be rendered as children of the `Tooltip`:

```jsx
<Tooltip
    tooltipContent={<p>I'm your neighberhood friendly tooltip content!</p>}
>
    <button>Hover over me please!</button>
</Tooltip>
```

## Under the hood

We use the [React Tiny Popover](https://github.com/alexkatz/react-tiny-popover) library to render the tooltip.

![Tooltip example](https://2541783509-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGfVxifKr3MI5NEiJCj%2Fsync%2F728196fdba9510e9cef4f44f371214e3d647516b.png?generation=1611168414431661\&alt=media)