İpucu

İpucu metni bir veri özniteliğinde yaşar ve bir sözde öğe tarafından çizilir; bu yüzden betik yoktur, çalışma anında konumlandırılacak bir şey yoktur ve DOM’da geride bir şey kalmaz. Üzerine gelindiğinde ve klavye odağında belirir; bununla kuralın :focus-within yarısı ilgilenir.

Temel ipucu

stack({ direction: 'row', gap: 'md' },
  tooltip({ content: 'Panoya kopyala' },
    iconButton({
      label: 'Kopyala',
      variant: 'soft',
      color: 'neutral',
      icon: icon('copy'),
    }),
  ),
  tooltip({ content: 'Siteyi yeniden derle' },
    button({ variant: 'outline', color: 'neutral' }, 'Yeniden derle'),
  ),
)

Konum

Varsayılan olarak üstte, üstte yer yoksa altta.

stack({ direction: 'row', gap: 'lg' },
  tooltip({ content: 'Tetikleyicinin üstünde' },
    button({ variant: 'soft', color: 'neutral' }, 'Üst'),
  ),
  tooltip({ content: 'Tetikleyicinin altında', placement: 'bottom' },
    button({ variant: 'soft', color: 'neutral' }, 'Alt'),
  ),
)

Erişilebilir adlar

İpucu metni süstür — ekran okuyucuların güvenilir biçimde duyurmadığı CSS content değerinden çizilir. İçerideki denetimin yine de kendi erişilebilir adına ihtiyacı vardır; bunu sağlayan şey iconButton() işlevinin label propudur. İpucu, denetimin adının söylemediği bir şey söylüyorsa onu görsel olarak gizli bir span içinde yinelemek için label: true geçirin.

stack({ direction: 'row', gap: 'lg' },
  tooltip({ content: 'Hemen üretime dağıtır', label: true },
    button({ color: 'danger' }, 'Dağıt'),
  ),
)

Metin üzerinde

İpucu, satır içi içeriği bir düğmeyi sardığı kadar rahat sarar.

text(
  'Derleme ',
  tooltip({ content: 'outDir ile yapılandırılabilir' }, code('dist/')),
  ' dizinine yazar, başka hiçbir yere değil.',
)

Ne zaman kullanılmamalı

İpuçları dokunmatikte belirmez ve işaretçi ayrılır ayrılmaz kaybolur. Okurun mutlaka alması gereken her şey — bir hata iletisi, zorunlu bir alanın açıklaması — bir ipucuna değil, alanın kendisindeki help metnine aittir.

Proplar