mirror of
https://github.com/cupcakearmy/svelte-hint.git
synced 2024-12-24 08:56:28 +00:00
3.0 KiB
3.0 KiB
svelte-hint
⚠️ This is beta software and still not ready to use
Svelte library for tooltips internally powered by the awesome Fluent UI 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
npm install svelte-hint
⌨️ Usage
With text
<script lang="ts">
import { Hint } from 'svelte-hint'
</script>
<Hint text="A tooltip!">
<button class="btn btn-success drag">Hover me!</button>
</Hint>
With custom html / components
<script lang="ts">
import { Hint } from 'svelte-hint'
</script>
<Hint>
<button class="btn btn-success drag">Hover me!</button>
<i slot="hint">Some custom html</i>
</Hint>
🏗 Setup
Floating UI needs some additional setup. Below are a few examples (which are shamefully copied from the carbon team).
🗂 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. |
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. |
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.
<Hint>
<div>Hover me</div>
<div slot="hint">Some custom html</div>
</Hint>