सामग्री पर जाएँ

टूलटिप

आइकन बटनों, कीबोर्ड शॉर्टकट्स और संक्षिप्त लेबलों के लिए होवर और फोकस संकेत — नियोब्रूटलिस्ट बॉर्डर-और-छाया उपचार के साथ।

import { Button } from "@/components/ui/button"
import {
  Tooltip,

टूलटिप एक छोटा लेबल है, जो होवर या कीबोर्ड फ़ोकस पर दिखता है और उस कंट्रोल के बारे में बताता है जिसे वह लपेटता है — यह पूरक टेक्स्ट है, इंटरैक्टिव कंटेंट की जगह कभी नहीं। यह Base UI Tooltip प्रिमिटिव पर बना है, पोर्टल के ज़रिए रेंडर होता है और किनारों से टकराव का ध्यान रखता है, और नियोब्रूटलिस्ट रेसिपी के अनुसार स्टाइल किया गया है: मोटा बॉर्डर, कठोर छाया और उलटा फ़िल, ताकि यह किसी भी बैकग्राउंड पर पढ़ा जा सके।

इसे इन स्थितियों में चुनें:

  • सिर्फ़-आइकन बटन — जो क्रिया कोरा आइकन नहीं बता पाता, उसे नाम दें: टूलबार, टेबल की पंक्ति-क्रियाएँ, एडिटर कंट्रोल।
  • कीबोर्ड शॉर्टकट — लेबल के साथ बाइंडिंग Kbd से लिखकर दिखाएँ, जैसा नीचे के उदाहरण में है।
  • छोटा किया गया या बहुत संक्षिप्त टेक्स्ट — पूरे फ़ाइल नाम, कटी हुई टेबल सेल, संक्षिप्त स्टेटस कोड।

इंस्टॉलेशन

निम्नलिखित कमांड चलाएँ:

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/tooltip.json
npx shadcn@latest add https://neobrutalism.com/r/base/tooltip.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/tooltip.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/tooltip.json

अपने ऐप की रूट में TooltipProvider जोड़ें।

app/layout.tsx
import { TooltipProvider } from "@/components/ui/tooltip"
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <TooltipProvider>{children}</TooltipProvider>
      </body>
    </html>
  )
}

निम्नलिखित डिपेंडेंसीज़ इंस्टॉल करें:

pnpm add @base-ui/react
npm install @base-ui/react
yarn add @base-ui/react
bun add @base-ui/react

निम्नलिखित कोड को अपने प्रोजेक्ट में कॉपी और पेस्ट करें।

components/ui/tooltip.tsx
"use client"

import * as React from "react"
import { Tooltip as TooltipPrimitive } from "radix-ui"

import { cn } from "@/lib/utils"

function TooltipProvider({
  delayDuration = 0,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
  return (
    <TooltipPrimitive.Provider
      data-slot="tooltip-provider"
      delayDuration={delayDuration}
      {...props}
    />
  )
}

function Tooltip({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
}

function TooltipTrigger({
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
}

function TooltipContent({
  className,
  sideOffset = 0,
  children,
  ...props
}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
  return (
    <TooltipPrimitive.Portal>
      <TooltipPrimitive.Content
        data-slot="tooltip-content"
        sideOffset={sideOffset}
        className={cn(
          "z-50 inline-flex w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) items-center gap-1.5 rounded border-2 bg-foreground px-2 py-1 text-xs text-background shadow-md has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
          className
        )}
        {...props}
      >
        {children}
        <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground" />
      </TooltipPrimitive.Content>
    </TooltipPrimitive.Portal>
  )
}

export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

इंपोर्ट पाथ को अपने प्रोजेक्ट सेटअप के अनुसार अपडेट करें।

अपने ऐप की रूट में TooltipProvider जोड़ें।

app/layout.tsx
import { TooltipProvider } from "@/components/ui/tooltip"
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <TooltipProvider>{children}</TooltipProvider>
      </body>
    </html>
  )
}

उपयोग

import {
  Tooltip,
  TooltipContent,
  TooltipTrigger,
} from "@/components/ui/tooltip"
<Tooltip>
  <TooltipTrigger>Hover</TooltipTrigger>
  <TooltipContent>
    <p>Add to library</p>
  </TooltipContent>
</Tooltip>

कंपोज़िशन

Tooltip बनाने के लिए निम्नलिखित कंपोज़िशन का उपयोग करें:

Tooltip
├── TooltipTrigger
└── TooltipContent

उदाहरण

पक्ष

टूलटिप की स्थिति बदलने के लिए side प्रॉप का उपयोग करें।

import { Button } from "@/components/ui/button"
import {
  Tooltip,

कीबोर्ड शॉर्टकट के साथ

import { SaveIcon } from "lucide-react"

import { Button } from "@/components/ui/button"

डिसेबल किया गया बटन

किसी डिसेबल किए गए बटन को span में लपेटकर उस पर टूलटिप दिखाएँ।

import { Button } from "@/components/ui/button"
import {
  Tooltip,

RTL

Neobrutalism में RTL समर्थन सक्षम करने के लिए, RTL कॉन्फ़िगरेशन गाइड देखें।

"use client"

import {

एक्सेसिबिलिटी

टूलटिप WAI-ARIA Tooltip पैटर्न का पालन करता है: पॉपअप role="tooltip" के साथ रेंडर होता है और प्रिमिटिव ट्रिगर के aria-describedby को उसकी ओर मोड़ देता है, इसलिए स्क्रीन रीडर इस संकेत को कंट्रोल के विवरण के रूप में पढ़ते हैं। टूलटिप ख़ुद कभी फ़ोकस नहीं लेता — लिंक या बटन के लिए इसकी जगह Popover इस्तेमाल करें, और ट्रिगर को इसके बिना भी समझ में आने लायक़ रखें।

कीबोर्ड इंटरैक्शन:

कुंजीक्रिया
Tab / Shift + Tabफ़ोकस ट्रिगर पर ले जाएँ — फ़ोकस आने पर टूलटिप खुलता है, हटने पर बंद हो जाता है
Escapeफ़ोकस ट्रिगर पर बना रहने दें और टूलटिप हटा दें
Enter / Spaceट्रिगर की अपनी क्रिया चलाएँ — टूलटिप एक विवरण है, कंट्रोल नहीं

API रेफ़रेंस

Base UI Tooltip दस्तावेज़ देखें।