# Feature tip

Used to help users learn about new or unfamiliar interface features.

Tabs: [Guidelines](/components/web/feature-tip/feature-tip.guidelines.md) · [Code](/components/web/feature-tip/feature-tip.code.md)

## Basic usage

`FeatureTip` wraps the element it explains and shows a tip next to it. The tip has a close button. Once it is closed, it is remembered in `localStorage` under `tipId` and the tip never shows again in that browser.

```tsx
import {Button, FeatureTip} from '@pleo-io/telescope'
;<FeatureTip tipId="categories_onboarding" content="Add your first category" side="bottom">
    <Button variant="primary">Add category</Button>
</FeatureTip>
```

Use a `tipId` that is unique and stable. Changing it shows the tip again for users who dismissed the previous one.

## Hiding the tip

Use `isTipHidden` to temporarily hide the tip, for example when it doesn't apply to the current view. This doesn't mark the tip as dismissed.

To hide it programmatically and mark it as dismissed, pass a `ref` and call `hide()`.

```tsx
const ref = React.useRef<FeatureTipRef>(null)

<FeatureTip ref={ref} tipId="import" content="Import your tags here">
    <Button variant="secondary" onClick={() => ref.current?.hide()}>
        Import
    </Button>
</FeatureTip>
```

To show a dismissed tip again, for example in tests, call `resetFeatureTipState(tipId)`.

## Localisation

The label of the close button is provided by the `FeatureTip.CloseButton` translation of the `TelescopeProvider`.

## Accessibility

- The close button is a `button` labelled with the `FeatureTip.CloseButton` translation.
- The tip is rendered in a [Popover](/components/web/popover/popover.guidelines) and is reachable with the keyboard.

## API reference

Shows a "tooltip" next to a wrapped component with some explanation It is used to guide users that are new to the app. The tip can be closed and it never shows up in the same browser again

#### `content` (required)

Type: `ReactNode`

##### Allowed values

- `null`
- `string`
- `number`
- `bigint`
- `false`
- `true`
- `ReactElement<unknown, string | JSXElementConstructor<any>>`
- `Iterable<ReactNode>`
- `ReactPortal`
- `Promise<AwaitedReactNode>`

Default: -

The content of the tip.

#### `isTipHidden`

Type: `boolean`

Default: -

Hides the tip without marking it as dismissed.

#### `maxWidth`

Type: `number | undefined`

Default: `280`

Maximum width of the tip, in pixels.

#### `side`

Type: `"left" | "top" | "right" | "bottom" | undefined`

Default: -

The side of the wrapped element the tip is rendered on.

#### `tipId` (required)

Type: `string`

Default: -

Unique id of the tip. Dismissal is remembered per id in `localStorage`.