<script lang="ts"> | |
import { onDestroy } from 'svelte'; | |
import tippy from 'tippy.js'; | |
export let placement = 'top'; | |
export let content = `I'm a tooltip!`; | |
export let touch = true; | |
let tooltipElement; | |
let tooltipInstance; | |
$: if (tooltipElement && content) { | |
if (tooltipInstance) { | |
tooltipInstance.setContent(content); | |
} else { | |
tooltipInstance = tippy(tooltipElement, { | |
content: content, | |
placement: placement, | |
allowHTML: true, | |
touch: touch | |
}); | |
} | |
} | |
onDestroy(() => { | |
if (tooltipInstance) { | |
tooltipInstance.destroy(); | |
} | |
}); | |
</script> | |
<div bind:this={tooltipElement} aria-label={content} class="flex"> | |
<slot /> | |
</div> | |