ДокументацияРазделы, компоненты, системы и их подразделы
Tooltip
Короткое контекстное пояснение
Context hint
Tooltip объясняет элемент одной короткой мыслью
Используйте подсказку для незнакомой иконки, термина или неочевидного действия. Tooltip не должен содержать форму, навигацию или информацию, без которой невозможно выполнить задачу.
Позиционирование с fallback
Наведите курсор или сфокусируйте кнопку и нажмите Enter, Space либо ArrowDown. Если места мало, система выбирает подходящую запасную сторону.
HTMLКороткая подсказка
<button
type="button"
data-ox-ui="tooltip"
data-ox-title="Архивировать проект"
data-ox-placement="top"
aria-label="Архивировать проект"
>
...
</button>Popover для заголовка и пояснения
Popover открывается кликом и допускает более подробный текст. Для действий, сложного интерактива и управления фокусом используйте Dropdown или Dialog.
data-ox-popover="true"data-ox-trigger="click"data-ox-content="..."Параметры поведения
Title можно взять из data-атрибута или нативного title: ядро уберёт браузерную подсказку и восстановит доступную связь при показе.
data-ox-trigger="hover"Значение по умолчанию; также доступны click или строка hover click.data-ox-placement="top"top, bottom, left, right и варианты start/end.data-ox-fallback-placements='["bottom","right","left"]'Запасные стороны по умолчанию.data-ox-offset='[0,12]'Смещение и расстояние от элемента.data-ox-size="md"xs, sm, md, lg или xl.data-ox-delay-show="80"Задержка появления в миллисекундах.data-ox-delay-hide="80"Задержка скрытия.data-ox-close-other="true"Закрывает другую открытую подсказку.data-ox-close-on-outside-click="true"Закрывает click/popover по внешнему клику.data-ox-html="false"При true HTML проходит через встроенную санитаризацию.data-ox-container="body"Контейнер создаваемой floating-поверхности.data-ox-motion-duration="180"Длительность анимации.
API, события и доступность
При показе ядро создаёт tooltip, связывает его с триггером через aria-describedby и удаляет после скрытия.
JavaScriptУправление Tooltip
import { Tooltip } from 'okaux/js/app.js';
const tooltip = Tooltip.getOrCreateInstance({
element: document.querySelector('[data-ox-ui="tooltip"]'),
});
tooltip.show();
tooltip.updatePosition();
tooltip.hide();tooltip:showПеред созданием и показом; событие можно отменить.tooltip:shownПосле появления.tooltip:hideПеред скрытием; событие можно отменить.tooltip:hiddenПосле удаления floating-элемента.Не доступное имяTooltip дополняет aria-label или видимый текст, но не заменяет их.EscapeЗакрывает открытые подсказки при keyboard: true.