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

The tooltip appears on hover and is useful for displaying extra information to desktop users. For accessibility, always set the id prop on SfTooltip and use the same value for the aria-describedby attribute on the child element.

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

export default function BasicTooltip() {
  const id = useId();
  const tooltipId = `${id}-tooltip`;

  return (
    <SfTooltip label="This is a tooltip!" id={tooltipId}>
      <span aria-describedby={tooltipId}>Hover me!</span>
    </SfTooltip>
  );
}

Focusable Tooltip content

For improved accessibility and better support for mobile users, ensure the tooltip’s trigger element is focusable. You can do this by applying a tabindex attribute or by using a natively focusable element such as a button or input. Also, handle the focus and blur events on the trigger to control the tooltip’s visibility. See the showcase below for a implementation example.

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

export default function BasicTooltip() {
  const id = useId();
  const tooltipId = `${id}-tooltip`;
  const { isOpen, open, close } = useDisclosure();

  return (
    <SfTooltip label="This is a tooltip!" id={tooltipId} open={isOpen} showArrow placement="right">
      <span aria-describedby={tooltipId} onFocus={open} onBlur={close} tabIndex={0}>
        Hover or focus me!
      </span>
    </SfTooltip>
  );
}

Accessibility notes

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

Playground