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