Tooltip.svelte 812 Bytes
Newer Older
Timothy J. Baek's avatar
Timothy J. Baek committed
1
2
3
4
5
6
<script lang="ts">
	import { onDestroy } from 'svelte';
	import tippy from 'tippy.js';

	export let placement = 'top';
	export let content = `I'm a tooltip!`;
Timothy J. Baek's avatar
Timothy J. Baek committed
7
	export let touch = true;
8
	export let className = 'flex';
Timothy J. Baek's avatar
Timothy J. Baek committed
9
10
11
12
13
14

	let tooltipElement;
	let tooltipInstance;

	$: if (tooltipElement && content) {
		if (tooltipInstance) {
Timothy J. Baek's avatar
Timothy J. Baek committed
15
16
17
18
19
			tooltipInstance.setContent(content);
		} else {
			tooltipInstance = tippy(tooltipElement, {
				content: content,
				placement: placement,
Timothy J. Baek's avatar
Timothy J. Baek committed
20
21
				allowHTML: true,
				touch: touch
Timothy J. Baek's avatar
Timothy J. Baek committed
22
			});
Timothy J. Baek's avatar
Timothy J. Baek committed
23
		}
24
25
26
27
	} else if (tooltipInstance && content === '') {
		if (tooltipInstance) {
			tooltipInstance.destroy();
		}
Timothy J. Baek's avatar
Timothy J. Baek committed
28
29
30
31
	}

	onDestroy(() => {
		if (tooltipInstance) {
Timothy J. Baek's avatar
Timothy J. Baek committed
32
			tooltipInstance.destroy();
Timothy J. Baek's avatar
Timothy J. Baek committed
33
34
35
36
		}
	});
</script>

37
<div bind:this={tooltipElement} aria-label={content} class={className}>
Timothy J. Baek's avatar
Timothy J. Baek committed
38
39
	<slot />
</div>