Tooltip (подсказка)

Обычно используется для показа подсказки при наведении курсора.

Базовое использование

Расположения и способы срабатывания

import { LhButton, LhTooltip } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <LhTooltip content="Подсказка сверху" placement="top">
        <LhButton>Сверху</LhButton>
      </LhTooltip>
      <LhTooltip content="Срабатывание по клику" trigger="click">
        <LhButton>Клик</LhButton>
      </LhTooltip>
      <LhTooltip content="Подсказка семантического цвета" type="success">
        <LhButton>Семантика</LhButton>
      </LhTooltip>
    </>
  )
}

Tooltip Props

Свойство	Описание	Тип	Варианты	По умолчанию
content	Содержимое подсказки	string	—	—
placement	Расположение	LhTooltipPlacement	top / bottom / left / right (с -start / -end)	'top'
trigger	Способ срабатывания	'hover' | 'click' | 'focus'	—	'hover'
disabled	Отключить подсказку	boolean	—	false
visible	Контролируемая видимость	boolean	—	—
defaultVisible	Неконтролируемая видимость по умолчанию	boolean	—	false
showAfter / openDelay	Задержка показа (мс, взаимные псевдонимы)	number	—	0
hideAfter / closeDelay	Задержка скрытия (мс, взаимные псевдонимы)	number	—	0
effect	Тема	'dark' | 'light'	—	'dark'
type	Тип семантического цвета (переопределяет цвет фона effect)	'primary' | 'success' | 'warning' | 'danger' | 'info'	—	—
bgColor	Пользовательский цвет фона (переопределяет effect и type)	string	—	—
maxWidth	Максимальная ширина	string | number	—	'200px'
themeVars	Переменные темы на уровне компонента	Record<string, string>	—	—
sx	Сокращённые props макета (применяются к триггеру)	SxProps	—	—

События Tooltip

Событие	Описание	Сигнатура коллбэка	Аналог в Vue
onVisibleChange	Изменение видимости (срабатывает и в контролируемом, и в неконтролируемом режимах)	(visible: boolean) => void	update:visible

ref

forwardRef<HTMLDivElement> — корневой элемент триггера. LhTooltipInstance предоставляет show() / hide() / toggle().

Упрощённый управляемый режим

В отличие от plus, в этой библиотеке нет переключателя manual: передача visible делает компонент контролируемым, а onVisibleChange уведомляет внешнюю сторону. См. Руководство по миграции.

Свёртывание при прокрутке

Подсказка автоматически сворачивается, когда её триггер прокручивается за пределы viewport (onScrollOut), чтобы зафиксированный оверлей не повисал над содержимым страницы.

Стили

import '@lh-ui/react/style/tooltip'