Tooltip
Підказка навколо тригера — чотири позиції, затримка показу, показ по фокусу.
Заміна атрибута title і саморобної директиви v-tooltip — та сама поведінка,
але з керуванням позицією, затримкою й доступністю. Своїй стороні бракує
місця — підказка перевертається на протилежний бік (по обох осях), і лише
коли не влазить і він, притискається до країв вікна.
Приклад
API
Props
| Назва | Тип | Типово | Опис |
|---|---|---|---|
placement | leftrighttopbottom | "top" | Звідки з'являється підказка відносно тригера. |
content | string | undefined | Текст підказки. Для складнішого вмісту є слот `content`. |
delay | number | 200 | Затримка показу при наведенні, мс. Фокус із клавіатури показує одразу. |
closeDelay | number | 100 | Скільки чекати, перш ніж сховати підказку, коли курсор пішов із тригера, мс. Цього вистачає, щоб перевести курсор на саму підказку й дочитати її. |
disabled | boolean | false | — |
Слоти
| Назва | Опис |
|---|---|
default | Тригер. Отримує `describedBy` — ПРОКИНЬТЕ його на інтерактивний елемент усередині, інакше скрінрідер не зв'яже підказку з елементом. |
content | Багатий вміст замість `content`. |
Коли використовувати
Для пояснення ІКОНКИ або стислого скорочення. Текст підказки — доповнення, яке можна пропустити.
Коли НЕ використовувати
Не ховайте в підказку то, що потрібно ОБОВ'ЯЗКОВО: на дотику її відкриває
лише довге натискання, про яке мало хто знає, а скрінрідер прочитає її
лише з described-by.
На дотику
Тап підказку НЕ показує: раніше сумісний mouseenter, який браузер шле
після тапу, відкривав її через 200 мс після натискання — і вона висіла,
доки не торкнешся чогось іншого. Тепер, як на Android, підказку відкриває
довге натискання (0,5 с), а після відпускання вона ховається через 1,5 с.
Клік, що приходить слідом за довгим натисканням, гаситься: людина хотіла
прочитати, а не натиснути.
Для форм замість підказки в button title є prop hint в Input — підказка
в потоці надійніша.
Доступність
Панель має role="tooltip" і id; слот тригера віддає describedBy —
прокиньте його в aria-describedby інтерактивного елемента.
Наведення показує підказку після delay, а фокус із клавіатури — одразу
й разом з aria-describedby. Із затримкою скрінрідер встигав оголосити
кнопку раніше, ніж з'являвся її опис. Фокус від кліку мишею підказку не
показує, а саме натискання її ховає.
Курсор можна перевести з тригера на саму підказку й дочитати її: вона
чекає closeDelay, поки курсор перетинає зазор (WCAG 1.4.13).
Escape ховає підказку й далі не йде. Відкрита в модалці, вона раніше
закривала тим самим натиском і модалку разом із формою.