Files
flotilla/src/lib/components/Tippy.svelte
T
2025-06-09 13:48:45 -07:00

40 lines
766 B
Svelte

<script lang="ts">
import "tippy.js/animations/shift-away.css"
import tippy from "tippy.js"
import {onMount, mount} from "svelte"
let {
component,
children = undefined,
props = {},
params = {},
popover = $bindable(),
instance = $bindable(),
...restProps
} = $props()
let element: Element
onMount(() => {
const target = document.createElement("div")
popover = tippy(element, {
content: target,
animation: "shift-away",
appendTo: document.querySelector(".tippy-target")!,
...params,
})
instance = mount(component, {target, props})
return () => {
popover?.destroy()
}
})
</script>
<div bind:this={element} class={restProps.class}>
{@render children?.()}
</div>