Tooltip

A floating label that appears on hover, providing contextual information for an element. Built on Radix UI Tooltip with animated entry and exit.

Setup — TooltipProvider

Wrap your application (or a shared layout) with TooltipProvider once to configure shared tooltip behaviour. The delayDuration prop sets the hover delay before tooltips appear for the whole subtree.

import { TooltipProvider } from "@bloomkit/react";
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <TooltipProvider delayDuration={200}>
          {children}
        </TooltipProvider>
      </body>
    </html>
  );
}

Usage

import { Tooltip } from "@bloomkit/react";
 
<Tooltip content="Save your changes" side="top">
  <button>Save</button>
</Tooltip>

Side placement

<Tooltip content="Above" side="top"><button>Top</button></Tooltip>
<Tooltip content="Below" side="bottom"><button>Bottom</button></Tooltip>
<Tooltip content="Left side" side="left"><button>Left</button></Tooltip>
<Tooltip content="Right side" side="right"><button>Right</button></Tooltip>

Rich content

The content prop accepts any ReactNode, so you can include formatted markup inside the tooltip.

<Tooltip
  content={
    <span>
      <strong>Pro tip:</strong> Press ⌘S to save
    </span>
  }
>
  <button>Save</button>
</Tooltip>

Props

Prop	Type	Default	Description
content	ReactNode	—	Content rendered inside the tooltip bubble
side	"top" \| "bottom" \| "left" \| "right"	"top"	Preferred side relative to the trigger element
children	ReactNode	—	The trigger element that activates the tooltip on hover
className	string	—	Additional Tailwind classes applied to the tooltip content

TooltipProvider props

Prop	Type	Default	Description
delayDuration	number	700	Milliseconds to wait before showing the tooltip on hover
children	ReactNode	—	The subtree where tooltips should be enabled