Vue

usePopover

usePopover is a wrapper around the Floating UI library (opens new window). It provides an API for positioning floating elements next to reference elements. This can be useful for creating tooltips, dropdowns, popovers, and other floating elements.

Usage

Simple Tooltip component example built on top of the usePopover composable.

For a minimal example, we can implement a floating element using three properties returned by the usePopover composable.

  1. referenceRef - A Vue template ref that should be bound to the element that the floating element will be positioned relative to.
  2. floatingRef - A Vue template ref that should be bound to the element you want to be floating.
  3. style - An object containing the position styles for your floating element.

By binding these properties to the appropriate elements, we can create any floating element - in this case, we have a Tooltip that displays when the reference element is hovered.

<script lang="ts" setup>
import { ref } from 'vue';
import { usePopover } from '@storefront-ui/vue';

defineProps({
  text: {
    type: String,
    default: '',
  },
});

const isOpen = ref(false);
const { referenceRef, floatingRef, style } = usePopover({ isOpen });
</script>

<template>
  <span ref="referenceRef" @mouseenter="isOpen = true" @mouseleave="isOpen = false">
    <slot />
    <div
      v-if="isOpen"
      ref="floatingRef"
      class="p-2 rounded bg-black text-white"
      :style="style"
    >
      {{ text }}
    </div>
  </span>
</template>

There are more options!

For a full list of the possible parameters and return values, see the API section.