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

import { SfTooltip } from '@storefront-ui/react';

export default function BasicTooltip() {
  return (
    <SfTooltip label="This is a tooltip!">
      <span>Hover me!</span>
    </SfTooltip>
  );
}

Accessibility notes

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

Playground