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.

🌈 Features

• Automatic positioning & overflow handling on screen edges (Fluent UI).
• 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>

🗂 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>