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-sm 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>