Qatlamlar · molecule
Tooltip
Ikon-tugma yoki qisqartma uçun qisqa nom: öram ustiga borilganda yoki fokusda çiqadi (JS'siz). Teskari yuza; joylaşuv: yuqorida, pastda, yon tomonda (start/end/left/right). Içida tugma yorliği (kbd) bölişi mumkin. Tooltip guruhi (4.166): .fx-tip-group[data-fx-tip] — bitta tooltip oçilgaç qöşni tugmaga ötilganda keyingisi keçikişsiz çiqadi (Radix skipDelay), guruhdan çiqilgaç ~300 ms (data-skip) dan keyin yana odatdagi keçikiş. Esc oçiq tooltipni yopadi.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-placement | topbottomstart inline boşlaniş tomoniend inline oxiri tomonileftright | top |
Anatomiya
- root
.fx-tipşart - bubble
.fx-tip__bubbleşart - shortcut
.fx-tip__bubble kbdixtiyoriy - group
.fx-tip-groupixtiyoriy
Holatlar
Klaviatura va kiriş
| Tugma | Amal |
|---|---|
| Tab | Fokusda körinadi |
| Esc | Oçiq tooltipni yopadi (fokus joyida qoladi) |
role="tooltip" + trigger'da aria-describedby. Ikon-tugmaning nomi baribir aria-label'da. Esc bilan yopiladi (WCAG 1.4.13), siçqonça bubble ustiga ötsa ham oçiq qoladi.
Naqş: WAI-ARIA APG tooltip · rol tooltip
Kod
AI uçun: qaçon işlatiladi
npx foxui add tip
<span class="fx-tip"> <button class="fx-btn" data-shape="icon" aria-describedby="tip1" aria-label="Nusxa oliş">⧉</button> <span class="fx-tip__bubble" role="tooltip" id="tip1">Nusxa oliş <kbd>Ctrl+C</kbd></span> </span> <span class="fx-tip" data-placement="end"> <button class="fx-btn" data-shape="icon" aria-describedby="tip2" aria-label="Öçiriş">×</button> <span class="fx-tip__bubble" role="tooltip" id="tip2">Öçiriş</span> </span> <!-- Tooltip guruhi (4.166): bittasi ochilgach qoʻshnisi kechikishsiz --> <div class="fx-tip-group" data-fx-tip role="toolbar" aria-label="Matn formati"> <span class="fx-tip"><button class="fx-btn" data-variant="ghost" data-shape="icon" aria-label="Qalin" aria-describedby="tg1"><b>Q</b></button><span class="fx-tip__bubble" role="tooltip" id="tg1">Qalin <kbd>Ctrl+B</kbd></span></span> <span class="fx-tip"><button class="fx-btn" data-variant="ghost" data-shape="icon" aria-label="Kursiv" aria-describedby="tg2"><i>K</i></button><span class="fx-tip__bubble" role="tooltip" id="tg2">Kursiv <kbd>Ctrl+I</kbd></span></span> <span class="fx-tip"><button class="fx-btn" data-variant="ghost" data-shape="icon" aria-label="Havola" aria-describedby="tg3"><u>H</u></button><span class="fx-tip__bubble" role="tooltip" id="tg3">Havola <kbd>Ctrl+K</kbd></span></span> </div>
Tokenlar: --fx-bg-page --fx-duration-delay-tip --fx-ease-enter --fx-ease-standard --fx-font-size-xs --fx-motion-fast --fx-motion-shift-sm --fx-popover-width --fx-radius-badge --fx-space-1 --fx-space-2 --fx-text-primary