VFloatFloating UI primitives for Vue 3

<script setup lang="ts">
import { ref } from "vue";
import { useFloatingContext, usePosition, useHover, useFocus, useArrow } from "v-float";

const anchorEl = ref<HTMLElement | null>(null);
const floatingEl = ref<HTMLElement | null>(null);
const arrowEl = ref<HTMLElement | null>(null);

const context = useFloatingContext({
  anchorEl,
  floatingEl,
  arrowEl,
});

const { styles } = usePosition(context, {
  placement: "top",
  middleware: {
    offset: 8,
    flip: true,
    shift: true,
  },
});

const { arrowStyles } = useArrow(context, { offset: "-5px" });
useHover(context, { delay: { open: 80, close: 120 } });
useFocus(context);
</script>

<template>
  <button ref="anchorEl" type="button">Hover me</button>

  <div
    v-if="context.state.open.value"
    ref="floatingEl"
    role="tooltip"
    :style="styles"
  >
    Copy link to clipboard
    <div ref="arrowEl" class="arrow" :style="arrowStyles" />
  </div>
</template>