Элементы

Карточка при наведении

Краткие сведения о ссылке: автор, проект, запись. Появляется с задержкой и не пропадает, пока курсор на карточке.

hover-card с версии 0.1.0 со скриптом

Примеры

Карточка автора

Разбор написала Анна Петрова, инженер по надёжности.

<p>Разбор написала <a href="#" data-ui-hovercard="#hc-author" aria-expanded="false">Анна Петрова</a>, инженер по надёжности.</p>
<div class="hovercard" id="hc-author" hidden>
  <div class="hovercard__head">
    <span class="hovercard__mark" aria-hidden="true">АП</span>
    <div>
      <p class="hovercard__title">Анна Петрова</p>
      <p class="hovercard__sub">SRE, ведущий</p>
    </div>
  </div>
  <p class="hovercard__text">Пишет про дежурства, постмортемы и мониторинг видеосвязи.</p>
  <p class="hovercard__meta">42 статьи · с 2021 года</p>
</div>

Карточка проекта

Записи встреч лежат в архиве проекта.

<p>Записи встреч лежат в <a href="#" data-ui-hovercard="#hc-project" aria-expanded="false">архиве проекта</a>.</p>
<div class="hovercard" id="hc-project" hidden>
  <p class="hovercard__title">Архив встреч</p>
  <p class="hovercard__sub">Хранение 30 дней</p>
  <p class="hovercard__text">Здесь 128 записей. Доступ — у участников комнаты.</p>
  <p class="hovercard__meta">Обновлено 12/10/2026 18:30</p>
</div>

Установка

bukatchuk-ui add hover-card

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

Файлы

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

Клавиши

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

Макрос для Jinja

{#- Ссылка с карточкой при наведении. Содержимое карточки — caller(). id карточки — id; ссылка ведёт на href. -#}
{% macro hover_card(id, text, href='#') -%}
<a href="{{ href }}" data-ui-hovercard="#{{ id }}" aria-expanded="false">{{ text }}</a>
<div class="hovercard" id="{{ id }}" hidden>{{ caller() }}</div>
{%- endmacro %}