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

Timothy J. Baek's avatar
Timothy J. Baek committed
5
6
7
8
	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
9
	export let touch = true;
10
	export let className = 'flex';
Timothy J. Baek's avatar
Timothy J. Baek committed
11
12
13
14
15
16

	let tooltipElement;
	let tooltipInstance;

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

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

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