Qatlamlar · molecule
Toggletip
ⓘ / ? tugma BOSILGANDA kiçik izoh oçiladi (hover emas): native popover + strelka, içida havola bölişi mumkin. Tooltip'dan farqi: bosiladi, telefonda işlaydi, içida havola mumkin.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-kind | help «?» belgisi | info |
Anatomiya
- root
.fx-toggletipşart - button
.fx-toggletip__btnşart - content
.fx-toggletip__contentşart
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Enter, Space | Oçadi/yopadi |
| Esc | Yopadi, fokus tugmaga qaytadi |
Tugmada aria-label (nima haqida izoh). popovertarget aria-expanded'ni brauzer özi beradi; Esc yopadi va fokus tugmaga qaytadi. Bosiş nişoni ≥ minimal.
Naqş: WAI-ARIA APG disclosure
Kod
AI uçun: qaçon işlatiladi
- Maydon yoki atama yonida qisqa izoh, içida havola bilan.
- Disabled sababini aytiş.
npx foxui add toggletip
<span class="fx-toggletip">
<button class="fx-toggletip__btn" type="button" popovertarget="tt1" aria-label="Izoh: narx"></button>
<div class="fx-popover fx-toggletip__content" id="tt1" popover data-arrow>
Narx har oy yangilanadi. <a href="#">Batafsil</a>
</div>
</span>
<span class="fx-toggletip" data-kind="help">
<button class="fx-toggletip__btn" type="button" popovertarget="tt2" aria-label="Yordam"></button>
<div class="fx-popover fx-toggletip__content" id="tt2" popover data-arrow>Maydon boş qolsa, standart qiymat olinadi.</div>
</span>Tokenlar: --fx-bg-muted --fx-border-color-focus --fx-border-width-default --fx-border-width-focus --fx-ease-standard --fx-font-size-xs --fx-font-weight-semibold --fx-motion-fast --fx-motion-press --fx-popover-width --fx-radius-circle --fx-size-icon-md --fx-size-min-target --fx-space-3 --fx-space-4 --fx-space-8 --fx-text-brand --fx-text-primary --fx-text-tertiary