İpucu
Bir öğenin üzerine fareyle gelince ya da klavyeyle odaklanınca beliren kısa açıklama. İkon düğmelerinin ne yaptığını ya da kısaltılmış bir değerin tamamını göstermek için kullanılır.
Temel kullanım
Açıklanacak öğeyi bileşenin içine koyun ve metni text ile verin. İpucu fareyle üzerine gelince ve Tab ile odaklanınca açılır, Esc ile kapanır. Tek satırdır; birkaç kelimeyi geçmeyin, uzun açıklamalar için Popover kullanın.
<div class="py-6">
<acun:tooltip text="Müşterinin sipariş geçmişi">
<acun:button variant="white" size="sm">Geçmiş</acun:button>
</acun:tooltip>
</div>| Prop | Değerler |
|---|---|
text | İpucu metni (tek satır) |
Konum
İpucu varsayılan olarak öğenin üstünde (top) açılır. Öğe sayfanın üst kenarına yakınsa position="bottom" ile altta açın.
<div class="flex gap-4 py-6">
<acun:tooltip text="Üstte açılır"><acun:button variant="outline-dark" size="sm">Üstte</acun:button></acun:tooltip>
<acun:tooltip text="Altta açılır" position="bottom"><acun:button variant="outline-dark" size="sm">Altta</acun:button></acun:tooltip>
</div>| Prop | Değerler |
|---|---|
position | top | bottom |
İkon düğmeleri
Tablo satırlarındaki yalnızca ikondan oluşan düğmeler en yaygın kullanım yeridir. İpucu role="tooltip" ile çizilir ve slot'taki ilk odaklanabilir öğeye aria-describedby ile kendiliğinden bağlanır; ekran okuyucu önce düğmenin adını, ardından ipucunu okur. İpucu bir açıklamadır, ad yerine geçmez: ikon düğmelerine yine aria-label verin.
<div class="flex gap-1 py-6">
<acun:tooltip text="Düzenle">
<acun:button variant="ghost" size="icon" aria-label="Düzenle"><acun:icon name="pencil-square" /></acun:button>
</acun:tooltip>
<acun:tooltip text="Yazdır">
<acun:button variant="ghost" size="icon" aria-label="Yazdır"><acun:icon name="printer" /></acun:button>
</acun:tooltip>
<acun:tooltip text="Kalıcı olarak sil">
<acun:button variant="ghost" size="icon" aria-label="Kalıcı olarak sil" class="text-red-600"><acun:icon name="trash" /></acun:button>
</acun:tooltip>
</div>| Prop | Değerler |
|---|---|
aria-label | Düğmenin erişilebilir adı |
aria-describedby | Kendiliğinden: slot'taki ilk odaklanabilir öğeye eklenir |
Kaydırılabilir alanlarda
İpucu sayfanın en dışına (body) taşınarak çizilir; bu sayede yatay kaydırılan tablo ya da panellerin kenarında kesilmez. Rozet gibi kendiliğinden odaklanamayan bir öğeye ipucu verirken ona tabindex="0" ekleyin, böylece klavyeyle de açılabilir.
<div class="max-w-xs overflow-x-auto rounded-sm border border-gray-200 py-6 dark:border-zinc-700">
<div class="flex w-[36rem] items-center gap-6 px-4 text-sm">
<span>Kadıköy deposu</span>
<acun:tooltip text="Depo kodu: KDK-01"><acun:badge variant="info" tabindex="0">KDK-01</acun:badge></acun:tooltip>
<span>312 sipariş</span>
</div>
</div>Prop'lar ve slot'lar
Bileşenin kabul ettiği değerler.
| Prop | Varsayılan | Açıklama |
|---|---|---|
text | '' | İpucu metni (role="tooltip") |
position | top | top · bottom |