<script>
// https://github.com/floating-ui/svelte-popper
import Popper from "@popperjs/svelte";
// super-simple CSS Object to string serializer
const css = obj =>
Object.entries(obj || {})
.map(x => x.join(":"))
.join(";");
// DOM references to the interested elements
let referenceElement;
let popperElement;
let arrowElement;
// Popper options, reactive to update when arrowElement is set
$: popperOptions = {
modifiers: [
{ name: "offset", options: { offset: [0, 5] } },
{ name: "arrow", options: { element: arrowElement } }
]
};
// bound variables where Popper will store styles and attributes
let styles = {};
let attributes = {};
console.log(styles);
</script>
<style>
/* for some example styles, see `dev/App.svelte` */
</style>
<Popper
reference={referenceElement}