SmartHint

NPM | Github

A hint that points at a field: a card with a title, a text and a close button, joined to the field by a blue pin. It is shadcn's Popover on Base UI, opened from code. The field keeps the focus while the hint is up.

Installation

bun add @propellerads/smart-hint

The styles come with the package. Colours come from @propellerads/tokens: load its CSS once in the app.

Usage

import SmartHint, {HintPosition} from '@propellerads/smart-hint';

<input id="rate" onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} />
<SmartHint attachToElementId="rate" title="Top bids" isVisible={isFocused} position={HintPosition.Top}>
  $0.31 · $0.29 · $0.27
</SmartHint>

| Prop | Type | Default | | |---|---|---|---| | attachToElementId | string | | The id of the element it points at | | title | ReactNode | | The line on top | | children | ReactNode | | The text under the title | | isVisible | boolean | false | Shows the hint. The close button hides it until isVisible changes again | | onCloseCallback | () => void | | Called on the close button and on Escape in the field | | position | 'top' \| 'right' \| 'bottom' \| 'left' | 'top' | Turns to the other side when there is no room | | smartHintCustomStyles | CSSProperties | | Inline styles on the card | | closeLabel | string | 'Close' | The close button's name for a screen reader | | className | string | | |

The ref reaches the card.

• The hint renders in a portal and follows the field as the page scrolls or resizes.
• While it is open the field is described by it (aria-describedby).
• A click outside leaves it open, as in v3.
• If there is no element with the id yet, the hint waits for one and warns in the console.

Overrides

.campaign {
  --smart-hint-max-width: 320px; /* 250px */
  --smart-hint-layer: 4000; /* z-index, 2000 */
}

Old names

HINT_POSITION from v2 is still exported.