Tooltip

A popup that displays information related to an element.

HTML

Anatomy

import { Tooltip } from "@lualtek/react-components";
 
export default () => {
  return (
    <Tooltip trigger={<span tabIndex={0}>Hover me</span>}>
      This is an extended description.
    </Tooltip>
  );
};

⚠️

You must wrap your application with TooltipProvider to ensure the tooltip is correctly placed. Read more bout it.

API Reference

This component extends the radix-ui Tooltip.Root (opens in a new tab) and Tooltip.Content (opens in a new tab) components, which expose different props that enables multiple functionalities, and adds the following:

export type TooltipProps = {
  /**
   * The element that triggers the tooltip.
   */
  trigger: ReactNode;
};

Toast Autocomplete