Tooltip

İşaretçi veya klavye odağında gösterilen bağlamsal etiket.

Tooltip.tsx

Kurulum

shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:

$npx shadcn@latest add https://ui.cagriozay.com.tr/r/tooltip.json

Kullanım Örneği

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

<Tooltip content="Projeyi kaydet" shortcut="⌘S" delayMs={250}>
  <Button variant="outline">Kaydet</Button>
</Tooltip>

Özellikler & Parametreler (API)

Prop	Tür	Varsayılan	Açıklama
content	ReactNode	—	Tooltip içinde gösterilen açıklama.
children	ReactElement	—	Event ve aria özellikleri korunarak kullanılan tek tetikleyici.
shortcut	string	—	İsteğe bağlı klavye kısayolu ipucu.
position	"top" \| "bottom" \| "left" \| "right"	"top"	Tooltip konumu.
variant	"dark" \| "light" \| "blueprint"	"dark"	Renk teması.
delayMs	number	100	Açılma gecikmesi.
closeDelayMs	number	0	Kapanma gecikmesi.
open	boolean	—	Kontrollü açık durumu.
defaultOpen	boolean	false	Kontrolsüz ilk açık durumu.
onOpenChange	(open: boolean) => void	—	Açık durum isteği değiştiğinde çağrılır.
disabled	boolean	false	Tooltip davranışını kapatır.