टूलटिप
आइकन बटनों, कीबोर्ड शॉर्टकट्स और संक्षिप्त लेबलों के लिए होवर और फोकस संकेत — नियोब्रूटलिस्ट बॉर्डर-और-छाया उपचार के साथ।
import { Button } from "@/components/ui/button"
import {
Tooltip,टूलटिप एक छोटा लेबल है, जो होवर या कीबोर्ड फ़ोकस पर दिखता है और उस कंट्रोल के बारे में बताता है जिसे वह लपेटता है — यह पूरक टेक्स्ट है, इंटरैक्टिव कंटेंट की जगह कभी नहीं। यह Base UI Tooltip प्रिमिटिव पर बना है, पोर्टल के ज़रिए रेंडर होता है और किनारों से टकराव का ध्यान रखता है, और नियोब्रूटलिस्ट रेसिपी के अनुसार स्टाइल किया गया है: मोटा बॉर्डर, कठोर छाया और उलटा फ़िल, ताकि यह किसी भी बैकग्राउंड पर पढ़ा जा सके।
इसे इन स्थितियों में चुनें:
- सिर्फ़-आइकन बटन — जो क्रिया कोरा आइकन नहीं बता पाता, उसे नाम दें: टूलबार, टेबल की पंक्ति-क्रियाएँ, एडिटर कंट्रोल।
- कीबोर्ड शॉर्टकट — लेबल के साथ बाइंडिंग
Kbdसे लिखकर दिखाएँ, जैसा नीचे के उदाहरण में है। - छोटा किया गया या बहुत संक्षिप्त टेक्स्ट — पूरे फ़ाइल नाम, कटी हुई टेबल सेल, संक्षिप्त स्टेटस कोड।
इंस्टॉलेशन#
निम्नलिखित कमांड चलाएँ:
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/tooltip.jsonnpx shadcn@latest add https://neobrutalism.com/r/base/tooltip.jsonyarn dlx shadcn@latest add https://neobrutalism.com/r/base/tooltip.jsonbunx --bun shadcn@latest add https://neobrutalism.com/r/base/tooltip.json
अपने ऐप की रूट में TooltipProvider जोड़ें।
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/reactnpm install @base-ui/reactyarn add @base-ui/reactbun add @base-ui/react
निम्नलिखित कोड को अपने प्रोजेक्ट में कॉपी और पेस्ट करें।
"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 जोड़ें।
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 दस्तावेज़ देखें।