Tooltip

Teks tooltip-nya tinggal di sebuah atribut data dan digambar oleh pseudo-elemen, jadi tidak ada skrip, tidak ada yang perlu diposisikan saat jalan, dan tidak ada yang tertinggal di DOM. Ia muncul saat disorot dan saat mendapat fokus papan ketik, yang diurus oleh separuh :focus-within pada aturannya.

Tooltip dasar

stack({ direction: 'row', gap: 'md' },
  tooltip({ content: 'Salin ke papan klip' },
    iconButton({
      label: 'Salin',
      variant: 'soft',
      color: 'neutral',
      icon: icon('copy'),
    }),
  ),
  tooltip({ content: 'Bangun ulang situsnya' },
    button({ variant: 'outline', color: 'neutral' }, 'Bangun ulang'),
  ),
)

Penempatan

Di atas secara bawaan, di bawah ketika tidak ada ruang di atasnya.

stack({ direction: 'row', gap: 'lg' },
  tooltip({ content: 'Di atas pemicunya' },
    button({ variant: 'soft', color: 'neutral' }, 'Atas'),
  ),
  tooltip({ content: 'Di bawah pemicunya', placement: 'bottom' },
    button({ variant: 'soft', color: 'neutral' }, 'Bawah'),
  ),
)

Nama yang dapat diakses

Teks tooltip-nya adalah hiasan — ia digambar dari content CSS, yang tidak selalu diumumkan pembaca layar dengan andal. Kendali di dalamnya tetap butuh namanya sendiri yang dapat diakses, dan itulah yang disediakan label milik iconButton(). Ketika tooltip-nya mengatakan sesuatu yang tidak dikatakan nama kendalinya, berikan label: true untuk mengulanginya dalam span yang tersembunyi secara visual.

stack({ direction: 'row', gap: 'lg' },
  tooltip({ content: 'Menerapkan ke produksi seketika', label: true },
    button({ color: 'danger' }, 'Terapkan'),
  ),
)

Pada teks

Tooltip membungkus konten sebaris sama nyamannya seperti ia membungkus sebuah tombol.

text(
  'Build menulis ke ',
  tooltip({ content: 'Bisa diatur dengan outDir' }, code('dist/')),
  ' dan tidak ke mana-mana lagi.',
)

Kapan tidak memakainya

Tooltip tidak muncul pada sentuhan, dan ia lenyap begitu penunjuknya pergi. Apa pun yang wajib diterima pembaca — pesan galat, penjelasan bidang yang wajib diisi — seharusnya berada di teks help pada bidangnya sendiri, bukan di dalam tooltip.

Props