Podpowiedź

Tekst podpowiedzi żyje w atrybucie data i jest rysowany przez pseudoelement, więc nie ma żadnego skryptu, niczego do pozycjonowania w czasie działania i niczego, co zostawałoby w DOM-ie. Pojawia się przy najechaniu i przy fokusie z klawiatury, czym zajmuje się połowa reguły z :focus-within.

Podstawowa podpowiedź

stack({ direction: 'row', gap: 'md' },
  tooltip({ content: 'Kopiuj do schowka' },
    iconButton({
      label: 'Kopiuj',
      variant: 'soft',
      color: 'neutral',
      icon: icon('copy'),
    }),
  ),
  tooltip({ content: 'Przebuduj witrynę' },
    button({ variant: 'outline', color: 'neutral' }, 'Przebuduj'),
  ),
)

Umiejscowienie

Domyślnie nad, a poniżej, gdy nad nią nie ma miejsca.

stack({ direction: 'row', gap: 'lg' },
  tooltip({ content: 'Nad elementem' },
    button({ variant: 'soft', color: 'neutral' }, 'Góra'),
  ),
  tooltip({ content: 'Pod elementem', placement: 'bottom' },
    button({ variant: 'soft', color: 'neutral' }, 'Dół'),
  ),
)

Dostępne nazwy

Tekst podpowiedzi jest ozdobą — rysuje go właściwość CSS content, której czytniki ekranu nie odczytują niezawodnie. Kontrolka w środku nadal potrzebuje własnej dostępnej nazwy, czyli tego, co daje label w iconButton(). Gdy podpowiedź mówi coś, czego nazwa kontrolki nie mówi, podaj label: true, by powtórzyć ją w ukrytym wizualnie elemencie.

stack({ direction: 'row', gap: 'lg' },
  tooltip({ content: 'Wdraża natychmiast na produkcję', label: true },
    button({ color: 'danger' }, 'Wdróż'),
  ),
)

Na tekście

Podpowiedź opakowuje treść liniową równie chętnie jak przycisk.

text(
  'Build zapisuje do ',
  tooltip({ content: 'Konfigurowalne przez outDir' }, code('dist/')),
  ' i nigdzie indziej.',
)

Kiedy jej nie używać

Podpowiedzi nie pojawiają się przy dotyku i znikają w chwili, gdy wskaźnik odjedzie. Wszystko, co czytający musi mieć — komunikat błędu, wyjaśnienie pola wymaganego — należy do tekstu help przy samym polu, a nie do podpowiedzi.

Propsy