Tooltip — Svelte

Tooltip component — Svelte.

Tooltip component

Wrap the trigger in tooltip-wrapper and set aria-describedby to the tooltip id. Positions: top, bottom, left, right.

Basic and positions

Live examples

Usage

svelte svelte 
<script>
  import Button from './components/svelte/Button.svelte';
  import Tooltip from './components/svelte/Tooltip.svelte';
</script>

<div class="tooltip-wrapper" aria-describedby="my-tooltip">
  <Button variant="primary">Hover me</Button>
  <Tooltip id="my-tooltip" text="Help text" position="top" />
</div>