Tooltip

SfTooltip can be used to provide additional information when an element receives focus or is hovered.

It's built on top of useTooltip and accepts all its params.

Examples

Basic Usage

<template>
  <div class="mt-12">
    <SfTooltip label="This is a tooltip!"> Hover me! </SfTooltip>
  </div>
</template>

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

Accessibility notes

By default, this component sets role="tooltip".

Playground