Tooltip

Ne zaman kullanılır

Tooltip, ikon düğmelerinin adını göstermek ve bir denetim hakkında kısa, gerekli olmayan bir ipucu vermek içindir.

Ne zaman kullanılmaz

• Görevi tamamlamak için gereken bilgi için: Bilgiyi sayfada, örneğin Field yardım metninde gösterin.
• Bağlantı ya da düğme içeren içerik için: Açılır pencere (Popover) kullanın.
• Odaklanamayan öğeler için: Klavye kullanıcıları ipucunu açamaz.
• Dokunmatik ekranda tek bilgi kaynağı olarak: Dokunmada ipucu açılmaz.

Anatomi

Kaydet

AçıkKoyu

Kodu kopyala

import { Button, Tooltip } from '@bigbang/ui';

export default function Default() {
  return (
    <Tooltip content="Değişiklikleri kaydeder ve pencereyi kapatır.">
      <Button variant="secondary">Kaydet</Button>
    </Tooltip>
  );
}

1. Tetikleyici: Sarılan odaklanabilir öğe.
2. Kutu: Ters zemin, body-sm metin, en fazla 240 px.
3. Ok: Tetikleyiciyi gösteren 8 px üçgen.

Davranış

• Üzerine gelince delay (varsayılan 400 ms) sonra, klavye odağında hemen açılır.
• İmleç ayrılınca, odak gidince ya da Escape ile kapanır.
• Yer yoksa ters yana geçer.
• Açıkken tetikleyiciye aria-describedby ile bağlanır; describes={false} bunu kapatır.

Yönergeler

• İpucunu bir cümleyle sınırlayın.
• Tetikleyicinin adını tekrarlamayın; ek bilgi verin. IconButton bunun istisnasıdır.
• Devre dışı bir öğeye ipucu koymayın; nedenini sayfada yazın.

İçerik

• Cümle olarak yazın ve sonuna nokta koyun; ikon adı ise nokta koymayın.
• İpucu metni kütüphane metni değildir; ürün metnidir.

Türkçe	İngilizce
Kopyala	Copy
Değişiklikleri kaydeder ve pencereyi kapatır.	Saves the changes and closes the window.

İlgili bileşenler

• IconButton: Adını ipucunda gösterir.
• Field: Kalıcı yardım metni.