forked from coracle/flotilla
Jon Staab
42 lines
859 B
Svelte
42 lines
859 B
Svelte
<script lang="ts">
|
|
import "tippy.js/animations/shift-away.css"
|
|
|
|
import tippy from "tippy.js"
|
|
import {onMount, mount} from "svelte"
|
|
import {isMobile} from "@lib/html"
|
|
|
|
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")!,
|
|
trigger: isMobile ? "click" : "mouseenter focus",
|
|
...params,
|
|
})
|
|
|
|
instance = mount(component, {target, props})
|
|
|
|
return () => {
|
|
popover?.destroy()
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<div bind:this={element} class={restProps.class}>
|
|
{@render children?.()}
|
|
</div>
|