Tooltip

Shows content on hover. Place TooltipProvider once at app root or layout.

Installation

npm install @nqlib/nqui

Import

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
} from '@nqlib/nqui';

Basic Usage

Copy this into your app — same pattern as the first example below.

import {
  Tooltip,
  TooltipTrigger,
  TooltipContent,
  TooltipProvider,
} from '@nqlib/nqui';
import { Button } from '@nqlib/nqui';

export default function Example() {
  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Button>Hover</Button>
        </TooltipTrigger>
        <TooltipContent>Tooltip text</TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}

Examples

Each example has a Preview and Code tab. Code is copy-paste ready (import from '@nqlib/nqui').

Basic Tooltip

Hover to show tooltip content

Loading preview…

example.tsx

'use client';import {  Tooltip,  TooltipTrigger,  TooltipContent,  TooltipProvider,} from '@nqlib/nqui';import { Button } from '@nqlib/nqui';export default function Example() {  return (    <TooltipProvider delayDuration={0} skipDelayDuration={0}>      <Tooltip>        <TooltipTrigger asChild>          <Button>Hover</Button>        </TooltipTrigger>        <TooltipContent>Tooltip text</TooltipContent>      </Tooltip>    </TooltipProvider>  );}

Provider

Place TooltipProvider once at app root (or layout) so all tooltips work.

Props

TooltipProvider

Prop	Type	Default	Description
`delayDuration`	`number`	`700`	Delay before showing tooltip (ms)
`skipDelayDuration`	`number`	`300`	Delay between tooltips when moving cursor
`disableHoverableContent`	`boolean`	`false`	Disable hovering over tooltip content
`children`	`React.ReactNode`	-	App content

Wraps Radix Tooltip.Root. Pass through to TooltipTrigger and TooltipContent.

TooltipTrigger

Prop	Type	Default	Description
`asChild`	`boolean`	`false`	Merge props into child (e.g. Button)
All standard `div` props	-	-	Accepts HTML attributes

TooltipContent

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"top"`	Tooltip placement
`sideOffset`	`number`	`4`	Offset from trigger
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment
`className`	`string`	-	Additional CSS classes
All standard `div` props	-	-	Accepts HTML attributes

Next Steps

Popover for click-to-open content
Hover Card for rich hover content