Svelte library for tooltips internally powered by the awesome Fluent UI with sensible default values.
Check out the Demo to see it in action.
npm install svelte-hint
<script lang="ts">
import Hint from 'svelte-hint'
</script>
<Hint text="A tooltip!">
<button class="btn btn-success drag">Hover me!</button>
</Hint>
<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>
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. |
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>