@elcrm/tooltip

React-подсказки для elCRM: portal в document.body, общий стек z-index (globalThis.elcrm.overlayZ), показ по hover/focus, позиция с clamp к краям viewport. Не нативный title.

Установка

npm install @elcrm/tooltip
# или
bun add @elcrm/tooltip

Требования: Node.js ≥ 18. Peer-зависимости: react ≥ 18, react-dom ≥ 18.

Для разработки пакета удобен Bun ≥ 1.3 (см. deploy.md / dev.md).

Быстрый старт

import { Tooltip } from "@elcrm/tooltip";
import "@elcrm/tooltip/style.css";

function Example() {
    return (
        <Tooltip content="Подсказка" placement="top">
            <button type="button">Наведите</button>
        </Tooltip>
    );
}

Стили также инжектятся при импорте JS (через vite-plugin-lib-inject-css). Явный импорт @elcrm/tooltip/style.css полезен для SSR или если CSS нужен отдельно.

В elWMS удобнее IconAction (tip=…).

API

Tooltip

| Проп | Тип | По умолчанию | Описание | | ------------- | ---------------------------------------- | ------------ | --------------------------------- | | content | ReactNode | — | Текст или разметка подсказки | | children | ReactNode | — | Якорь (триггер) | | placement | "top" \| "bottom" \| "left" \| "right" | "top" | Сторона относительно якоря | | orientation | то же, что placement | — | @deprecated — используйте placement | | textAlign | "center" \| "left" \| "right" | "center" | Выравнивание текста | | delay | number | 180 | Задержка показа, мс | | delayHide | number | 60 | Задержка скрытия, мс | | disabled | boolean | false | Не показывать | | open | boolean | — | Принудительно открыт (отладка) | | className | string | — | Класс на обёртке якоря |

overlayZ

Общий стек с modal / form / alert / notice:

import {
    acquireOverlayZIndex,
    releaseOverlayZIndex,
    peekOverlayZIndex,
} from "@elcrm/tooltip";

Обычно вызывать вручную не нужно — Tooltip берёт и отпускает z-index сам.

CSS-переменные

Стили — CSS Modules с короткими классами (r корень, t пузырь). Цвета задаёт тема приложения; fallback в пакете нет.

| Переменная | Назначение | | ----------------------- | ----------------- | | --tooltip-bg | Фон | | --tooltip-fg | Цвет текста | | --tooltip-radius | Скругление (по умолчанию 8px) | | --tooltip-max-width | Макс. ширина | | --tooltip-font-size | Размер шрифта | | --tooltip-padding-block | Вертикальный padding | | --tooltip-padding-inline | Горизонтальный padding | | --tooltip-padding | Shorthand padding | | --tooltip-shadow | Тень | | --tooltip-gap | Зазор до якоря |

Поведение

• SSR-безопасно (без document portal не создаётся)
• Portal в document.body
• ARIA: role="tooltip", aria-describedby на якоре
• При нехватке места сторона зеркалится (top↔bottom, left↔right)
• Позиция обновляется на resize / scroll (capture)

Публикация

Автодеплой на npm через GitHub Actions — см. deploy.md.

Лицензия

MIT © MaSkal