# svelte-hint Svelte library for tooltips internally powered by the awesome [Popper.js](https://popper.js.org/) with sensible default values. Check out the **[demo]()** to see it in action. ## 🌈 Features - Automatic positioning & overflow handling on screen edges. - Fully typed. - Sensible default values. - Use text or custom html/components as tooltips. ## 📀 Installation ```bash npm install svelte-hint ``` ## ⌨️ Usage ### With text ```svelte ``` ### With custom html / components ```svelte Some custom html ``` ## 🗂 Docs ### Props | Prop | Type | Default | Description | | ----------- | ----------------------- | ------------------- | ----------------------------------------------------------------------------------------------------- | | `placement` | `Placement` | `auto` | For possible values see [popper](https://popper.js.org/docs/v2/constructors/#options). | | `text` | `string` | `''` | Text to be used as the tooltip. If empty the slot will be used. | | `boundary` | `HTMLElement \| string` | `'clippingParents'` | See [popper docs](https://popper.js.org/docs/v2/utils/detect-overflow/#boundary) for possible values. | | `offset` | `number` | `4` | The offset is the distance that the tooltip gets positioned from the trigger. | ### 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
```