A popup that displays information related to an element.



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

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;