<Popper
  reference={referenceElement}
  popper={popperElement}
  options={popperOptions}
  bind:styles
  bind:attributes
/>

<button bind:this={referenceElement}>Reference Element</button>
<div
  bind:this={popperElement}
  class="tooltip"
  style={css(styles.popper)}
  {...attributes.popper}>
  Popper Element
  <div bind:this={arrowElement} class="arrow" style={css(styles.arrow)} />
</div>

<script>
  let styles = {};
  let attributes = {};
</script>

<button
  use:popper={{ popperElement, options }}
  on:popperUpdate={evt => {
    styles = evt.detail.styles;
    attributes = evt.detail.attributes;
  }}
>
  Reference Element
</button>

<script lang="ts">
  import Popper from '@popperjs/svelte'
  import { fly } from 'svelte/transition'
  import { quadOut, quadIn } from 'svelte/easing'

  const inProps = { y: 10, duration: 200, easing: quadIn }
  const outProps = { y: -10, duration: 100, easing: quadOut, delay: 100 }

  // 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 = {} as any
  let attributes = {} as any

  console.log(styles)
</script>

<Popper reference={referenceElement} popper={popperElement} options={popperOptions} bind:styles bind:attributes>
  <div bind:this={referenceElement}>
    <slot name="trigger" />
  </div>

  <div bind:this={popperElement} class="tooltip" style={css(styles.popper)} {...attributes.popper}>
    <div class={`w-auto bg-white rounded elevation-3`} in:fly={inProps} out:fly={outProps}>
      <slot />
    </div>
    <div bind:this={arrowElement} class="arrow" style={css(styles.arrow)} />
  </div>
</Popper>