Skip to Content
FrontendBundlesComponentsUI PrimitivesTooltip

Tooltip

Accessible floating tooltip built on Radix UI. Shows additional context on hover or focus.

Import

import {
  Tooltip, TooltipTrigger, TooltipContent,
  TooltipProvider, TooltipPortal,
} from "@phpcreation/frontend-components-react-nextjs-bundle/components/Tooltip";

Setup

TooltipProvider must wrap all Tooltip components — place it once at the app root.

// app/layout.tsx
import { TooltipProvider } from "...";
 
export default function RootLayout({ children }) {
  return <TooltipProvider>{children}</TooltipProvider>;
}

Usage

import { Tooltip, TooltipTrigger, TooltipContent } from "...";
 
<Tooltip>
  <TooltipTrigger asChild>
    <Button size="icon" variant="ghost">
      <InfoIcon />
    </Button>
  </TooltipTrigger>
  <TooltipContent>
    <p>This field is calculated automatically</p>
  </TooltipContent>
</Tooltip>
Last updated on
TabsPopover