useTooltip

To implement a tooltip, we can use the useTooltip composable to create a custom tooltip component. This hook returns a set of properties that can be used to build a custom tooltip component. For a minimal example, we can implement a tooltip using the following properties:

1. isOpen - A boolean that indicates whether or not the tooltip should be open
2. triggerProps - An object containing the props that should be placed on the trigger element (the element that the tooltip will be positioned relative to)
3. tooltipProps - An object containing the props that should be placed on the tooltip element
4. arrowProps - An object containing the props that should be placed on the tooltip arrow element

So if we wanted to build a custom tooltip with Transition, we could do something like this:

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

const props = defineProps({
  label: {
    type: String,
    default: '',
  },
});

const { label } = toRefs(props);
const { isOpen, triggerProps, tooltipProps, arrowProps } = useTooltip();
</script>

<template>
  <span v-bind="triggerProps">
    <slot />
    <div
      v-if="label && isOpen"
      class="bg-green-800 p-1 rounded text-white w-max transition-opacity duration-300"
      v-bind="tooltipProps"
    >
      {{ label }}
      <span v-bind="arrowProps" class="bg-green-800 w-[8px] h-[8px] rotate-45" />
    </div>
  </span>
</template>