Tooltip

Setup

<script lang="ts">
  import { Tooltip, Button } from 'svelte-5-ui-lib';
</script>

Interactive Tooltip Builder

Offset: 6px 
<Button id="type-1" class="m-8">Tooltip trigger</Button>
<Tooltip
  color="default"
  offset={6}
  triggeredBy="#type-1">Tooltip content</Tooltip>

Examples

<script lang="ts">
  import { Tooltip, Button } from 'svelte-5-ui-lib';
</script>

<div class="mt-20 flex justify-center">
  <Button id="btn">Click me</Button>
  <Tooltip showOn="click" triggeredBy="#btn" color="blue" position="top" class="p-4">Click anywhere to hide me.</Tooltip>
</div>

Component data