svelte-hint

Svelte library for tooltips internally powered by the awesome Fluent UI with sensible default values.

Check out the Demo to see it in action.

!Screenshot

!version badge
!downloads badge
!dependency count
!minzip size badge
!types badge

🌈 Features

- Automatic positioning & overflow handling on screen edges (Fluent UI).
- Fully typed.
- Sensible default values.
- Use text or custom html/components as tooltips.

📀 Installation

``bash
npm install svelte-hint
`

⌨️ Usage

$3

`svelte



Hover me!

`

$3

`svelte



Hover me!
Some custom html

`

🗂 Docs

$3

| Prop | Type | Default | Description |
| ----------- | ----------------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------- |
| text | string | '' | Text to be used as the tooltip. If empty the slot will be used. |
| placement | Placement | auto | See the Fluent UI docs. |
| boundary | HTMLElement \| string | 'clippingAncestors' | See the Fluent UI docs. |
| offset | Options | 4 | See the Fluent UI docs. |
| auto | boolean \| 'start' \| 'end' | false | Use the autoPlacement middleware. If set placement will be ignored. |

$3

#### hint

> Only works if the text props is empty. Otherwise the slot is ignored.

If you don't want to use the pre-styled tooltip you are free to use whatever html / svelte code you'd like as the tooltip.

`svelte