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 trigger element that will show the tooltip when hovered or focused.
   */
  trigger: ReactNode;
  /**
   * Where to place the tooltip relative to the trigger.
   *
   * @defaultValue "top"
   */
  side?: TooltipPrimitive.TooltipContentProps['side'];
  /**
   * Use a portal to render the tooltip.
   */
  usePortal?: boolean;
}

Toast Autocomplete