@yandex/ui

# Tooltip <a href='https://github.yandex-team.ru/search-interfaces/frontend/tree/master/packages/lego-components/src/Tooltip' target='_blank'><img src='https://badger.yandex-team.ru/custom/[Исходники]/[Github ][green]/badge.svg' /></a> <a href='https://search.yandex-team.ru/stsearch?text=Tooltip.ts&facet.queue=ISL&facet.type=bug&facet.status=128' target='_blank'><img src='https://badger.yandex-team.ru/custom/[Известные проблемы]/[Startrek][blue]/badge.svg' /></a>  Компонент, использующийся для создания всплывающих подсказок.  ## Пример использования Конфигурация темы на уровне проекта: ```ts // src/lib/theme.ts import { configureRootTheme } from '@yandex-lego/components/Theme' import { theme } from '@yandex-lego/components/Theme/presets/default' configureRootTheme({ theme }) ``` Использование с нужным набором модификаторов: ```ts // src/App.ts import React from 'react' import { compose } from '@bem-react/core' import { Tooltip as TooltipDesktop, withSizeM, withViewDefault, } from '@yandex-lego/components/Tooltip/desktop' const Tooltip = compose( withSizeM, withViewDefault, )(TooltipDesktop) const App = () => { const [visible, setVisible] = React.useState(false) const buttonRef = React.useRef(null) return ( <> <button ref={buttonRef} onMouseOver={() => setVisible(true)} onMouseLeave={() => setVisible(false)} > Target </button> <Tooltip view="default" size="m" anchor={buttonRef} visible={visible}> Description </Tooltip> </> ) } ``` Использование с полным набором модификаторов: При использовании компонента `stateless` необходимо связать `target` и `tooltip` через свойство `anchor`, а также задать свойство `visible`. ```ts // src/App.ts import React from 'react' import { Tooltip } from '@yandex-lego/components/Tooltip/desktop/bundle' const App = () => { const [visible, setVisible] = React.useState(false) const buttonRef = React.useRef(null) return ( <> <button ref={buttonRef} onMouseOver={() => setVisible(true)} onMouseLeave={() => setVisible(false)} > Target </button> <Tooltip view="default" size="m" anchor={buttonRef} visible={visible}> Description </Tooltip> </> ) } ``` При использовании компонента `stateful` достаточно обернуть любой react-элемент в `TooltipStateful` и задать описание в `content`. ```ts import React from 'react' import { TooltipStateful } from '@yandex-lego/components/Tooltip/desktop/bundle' const App = () => ( <TooltipStateful view="default" size="m" content="Description"> <button> Target </button> </TooltipStateful> ) ``` ## Примеры ### Размер подсказки Чтобы изменить размер подсказки, установите свойство `size` в одно из следующих значений: `"s"`, `"m"`, `"l"`. {{%story::desktop:surface-tooltip-desktop--size%}} ### Состояние подсказки Чтобы изменить состояние подсказки, установите свойство `state` в одно из следующих значений: `"warning"`, `"alert"`, `"success"`. {{%story::desktop:surface-tooltip-desktop--state%}} ### Направление раскрытия подсказки Чтобы изменить направление раскрытия подсказки, установите свойство `direction` с одним или несколькими допустимыми значениями — `"top-left"`, `"top-center"`, `"top-right"`, `"right-top"`, `"right-center"`, `"right-bottom"`, `"bottom-right"`, `"bottom-center"`, `"bottom-left"`, `"left-bottom"`, `"left-center"`, `"left-top`". Если свойство `direction` не было установлено, то будут использованы <a href="https://github.yandex-team.ru/search-interfaces/frontend/blob/master/packages/lego-components/src/Popup/_target/Popup_target_anchor.tsx#L19-L32" target="_blank">значения по умолчанию</a> в порядке приоритета раскрытия. {{%story::desktop:surface-tooltip-desktop--direction%}} ## Свойства ### Stateless Компонент частично реализует интерфейс `Popup` и `PopupTargetAnchor`.  | Свойство | Тип | По умолчанию | Описание | | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------- | | keepMounted? | `false \| true` | `true` | Сохраняет контейнер в DOM после создания | | className? | `string` | — | Дополнительный класс | | hasTail? | `false \| true` | — | Включает/отключает хвостик у попапа | | innerRef? | `(instance: HTMLDivElement) => void \| RefObject<HTMLDivElement>` | — | Ссылка на корневой DOM-элемент компонента | | zIndex? | `number` | — | Задает слой `z-index` | | visible? | `false \| true` | — | Делает попап видимым | | scope? | `RefObject<HTMLElement>` | `document.body` | Ссылка на DOM-элемент, в котором размещается попап; важно, чтобы контейнер имел `position: relative` для корректного позиционирования | | onClose? | `(event: KeyboardEvent \| MouseEvent, source: "esc" \| "click") => void` | — | Обработчик, вызывающийся после нажатия на клавишу Esc либо мышкой на область вне контейнера | | onClick? | `(event: MouseEvent<HTMLDivElement, MouseEvent>) => void` | — | Обработчик, вызываемый при срабатывании события click | | mainOffset? | `number` | `0` | Отступ попапа относительно основного направления | | secondaryOffset? | `number` | `0` | Отступ попапа относительно второстепенного направления | | tailOffset? | `number` | `0` | Отступ хвостика от края попапа | | anchor? | `RefObject<HTMLElement>` | — | Элемент, относительно которого позиционируется попап | | state? | `"warning" \| "alert" \| "success"` | — | Визуальное состояние подсказки | | direction? | `"bottom-left" \| "bottom-center" \| "bottom-right" \| "top-left" \| "top-center" \| "top-right" \| "right-top" \| "right-center" \| "right-bottom" \| "left-top" \| "left-center" \| "left-bottom" \| Direction[]` | — | Направление для раскрытия подсказки | | id? | `string` | — | Уникальный id подсказки |  ### Stateful Компонент частично реализует интерфейс `Tooltip`. | Свойство | Тип | По умолчанию | Описание | | --------------- | -------------------------------------------- | ------------ | -------------------------------------------------------------- | | children | `ReactNode` | — | Компонент или элемент, для которого нужно показать подсказку | | content | `ReactNode` | — | Содержимое, которое будет показано в подсказке | | trigger? | `"click" \| "hover" \| "focus" \| Trigger[]` | `hover` | Режим для показа подсказки; может содержать несколько значений | | defaultVisible? | `false \| true` | `false` | Показывает подсказку сразу видимой | ## Доступность Чтобы обеспечить доступность с использованием компонента `stateless`, необходимо связать `anchor` с подсказкой, указав `aria-describedby` и `id`. > ⚠️ При использовании компонента `stateful` эта логика реализована внутри. ```ts <button aria-describedby="tooltip-1"> Target </button> <Tooltip id="tooltip-1"> Description </Tooltip> ```