Элементы

Подсказка

Короткая подсказка при наведении и фокусе. Текст в атрибуте или в готовом элементе с role="tooltip".

tooltip с версии 0.1.0 со скриптом

Примеры

Подсказка к кнопке-значку

<button class="btn btn--ghost btn--sm" type="button" data-ui-tooltip="Выключить микрофон" aria-label="Микрофон">Mic</button>
<button class="btn btn--ghost btn--sm" type="button" data-ui-tooltip="Показать экран" data-ui-side="bottom" aria-label="Демонстрация экрана">Screen</button>

Подсказка к сокращению

Задержка не должна превышать SLO более 5 минут в месяц.

<p>Задержка не должна превышать <abbr tabindex="0" data-ui-tooltip="Service level objective — целевой уровень сервиса">SLO</abbr> более 5 минут в месяц.</p>

Готовый элемент подсказки

<button class="btn btn--ghost" type="button" data-ui-tooltip="" aria-describedby="tip-record">Запись</button>
<div class="tooltip" id="tip-record" role="tooltip" hidden>Запись сохранится 30 дней</div>

Установка

bukatchuk-ui add tooltip

Вместе с компонентом установятся: tokens, fonts, base, core, button.

Файлы

Файл	Назначение
`tooltip.css`	стили
`tooltip.js`	скрипт
`example.html`	образец разметки, в проект не копируется
`tooltip.jinja.html`	вставка для Jinja

Клавиши

Клавиша	Действие
`Tab`	фокус на элементе показывает подсказку сразу
`Esc`	скрыть подсказку

Макрос для Jinja

{#- Подсказка. Оборачивает содержимое (caller) в элемент с data-ui-tooltip. side: top | bottom | left | right.
    Подсказка недоступна на касание, поэтому важное в неё не кладут. -#}
{% macro tooltip(text, side='top', tag='span') -%}
<{{ tag }} tabindex="0" data-ui-tooltip="{{ text }}" data-ui-side="{{ side }}">{{ caller() }}</{{ tag }}>
{%- endmacro %}