https://github.com/cupcakearmy/svelte-hint
Svelte library for tooltips
https://github.com/cupcakearmy/svelte-hint
library popperjs svelte tooltip
Last synced: 5 months ago
JSON representation
Svelte library for tooltips
- Host: GitHub
- URL: https://github.com/cupcakearmy/svelte-hint
- Owner: cupcakearmy
- Created: 2022-01-13T12:09:13.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-10-07T11:35:19.000Z (over 2 years ago)
- Last Synced: 2025-04-06T14:33:30.840Z (about 1 year ago)
- Topics: library, popperjs, svelte, tooltip
- Language: Svelte
- Homepage: https://svelte-hint.pages.dev/
- Size: 149 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# svelte-hint
Svelte library for tooltips internally powered by the awesome [Fluent UI](https://floating-ui.com/) with sensible default values.
Check out the **[Demo](https://svelte-hint.pages.dev/)** to see it in action.
## 🌈 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
### With text
```svelte
import Hint from 'svelte-hint'
Hover me!
```
### With custom html / components
```svelte
import Hint from 'svelte-hint'
Hover me!
Some custom html
```
## 🗂 Docs
### Props
| 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](https://floating-ui.com/docs/computePosition#placement). |
| `boundary` | `HTMLElement \| string` | `'clippingAncestors'` | See the [Fluent UI docs](https://floating-ui.com/docs/detectOverflow#boundary). |
| `offset` | `Options` | `4` | See the [Fluent UI docs](https://floating-ui.com/docs/offset#options). |
| `auto` | `boolean \| 'start' \| 'end'` | `false` | Use the [`autoPlacement`](https://floating-ui.com/docs/autoPlacement) middleware. If set `placement` will be ignored. |
### Slots
#### `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
Hover me
Some custom html
```