Feature tip

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.

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().

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 and is reachable with the keyboard.

API reference