Текстовая подсказка, которая показывает дополнительную информацию при наведении курсора мыши.

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

vue

<script setup lang="ts">
import { LhTooltip, LhButton } from '@lh-ui/vue3'
</script>

<template>
  <!-- Базовое использование -->
  <LhTooltip content="Это подсказка">
    <LhButton>Наведите, чтобы показать подсказку</LhButton>
  </LhTooltip>
</template>

vue

<script>
import { LhTooltip, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhTooltip, LhButton },
}
</script>

<template>
  <!-- Базовое использование -->
  <LhTooltip content="Это подсказка">
    <LhButton>Наведите, чтобы показать подсказку</LhButton>
  </LhTooltip>
</template>

Различные положения

vue

<script setup lang="ts">
</script>

<template>
  <!-- Сверху -->
  <LhTooltip content="Подсказка сверху" placement="top">
    <LhButton>Вверх</LhButton>
  </LhTooltip>
  <!-- Снизу -->
  <LhTooltip content="Подсказка снизу" placement="bottom">
    <LhButton>Вниз</LhButton>
  </LhTooltip>
  <!-- Слева -->
  <LhTooltip content="Подсказка слева" placement="left">
    <LhButton>Влево</LhButton>
  </LhTooltip>
  <!-- Справа -->
  <LhTooltip content="Подсказка справа" placement="right">
    <LhButton>Вправо</LhButton>
  </LhTooltip>
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- Сверху -->
  <LhTooltip content="Подсказка сверху" placement="top">
    <LhButton>Вверх</LhButton>
  </LhTooltip>
  <!-- Снизу -->
  <LhTooltip content="Подсказка снизу" placement="bottom">
    <LhButton>Вниз</LhButton>
  </LhTooltip>
  <!-- Слева -->
  <LhTooltip content="Подсказка слева" placement="left">
    <LhButton>Влево</LhButton>
  </LhTooltip>
  <!-- Справа -->
  <LhTooltip content="Подсказка справа" placement="right">
    <LhButton>Вправо</LhButton>
  </LhTooltip>
</template>

Пользовательская задержка

vue

<script setup lang="ts">
import { LhTooltip, LhButton } from '@lh-ui/vue3'
</script>

<template>
  <!-- Показ с задержкой 1 с -->
  <LhTooltip content="Подсказка с задержкой 1 секунда" :show-after="1000">
    <LhButton>Подсказка с задержкой</LhButton>
  </LhTooltip>
  <!-- open-delay / close-delay -->
  <LhTooltip content="Показ через 300 мс после входа, скрытие через 500 мс после ухода" :open-delay="300" :close-delay="500">
    <LhButton>open-delay / close-delay</LhButton>
  </LhTooltip>
</template>

vue

<script>
import { LhTooltip, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhTooltip, LhButton },
}
</script>

<template>
  <!-- Показ с задержкой 1 с -->
  <LhTooltip content="Подсказка с задержкой 1 секунда" :show-after="1000">
    <LhButton>Подсказка с задержкой</LhButton>
  </LhTooltip>
  <!-- open-delay / close-delay -->
  <LhTooltip content="Показ через 300 мс после входа, скрытие через 500 мс после ухода" :open-delay="300" :close-delay="500">
    <LhButton>open-delay / close-delay</LhButton>
  </LhTooltip>
</template>

Локализация

Текст подсказки можно локализовать через LhConfigProvider в комбинации с языковым пакетом.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhConfigProvider, LhTooltip, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
</script>

<template>
  <!-- Переключение языкового пакета через ConfigProvider -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhTooltip :content="locale === 'zh-CN' ? '中文提示' : 'English Tooltip'">
      <LhButton>Tooltip</LhButton>
    </LhTooltip>
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhTooltip, LhButton } from '@lh-ui/vue3'
import { zhCN } from '@lh-ui/vue3'
import { enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhTooltip, LhButton },
  data() {
    return {
      locale: 'zh-CN',
      zhCN: zhCN,
      enUS: enUS,
    }
  },
}
</script>

<template>
  <!-- Переключение языкового пакета через ConfigProvider -->
  <LhConfigProvider :locale="locale === 'zh-CN' ? zhCN : enUS">
    <LhTooltip :content="locale === 'zh-CN' ? '中文提示' : 'English Tooltip'">
      <LhButton>Tooltip</LhButton>
    </LhTooltip>
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">
      {{ locale === 'zh-CN' ? '切换英文' : 'Switch to Chinese' }}
    </LhButton>
  </LhConfigProvider>
</template>

Быстрая раскладка sx

С помощью свойства sx можно быстро настроить отступы и размеры корневого элемента триггера без написания дополнительного CSS.

vue

<script setup lang="ts">
import { LhTooltip, LhButton } from '@lh-ui/vue3'
</script>

<template>
  <!-- Отступы через sx -->
  <LhTooltip content="sx применяется к корневому элементу триггера" :sx="{ mt: 2, ml: 2 }">
    <LhButton type="primary">Отступ сверху 2, отступ слева 2</LhButton>
  </LhTooltip>
</template>

vue

<script>
import { LhTooltip, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhTooltip, LhButton },
}
</script>

<template>
  <!-- Отступы через sx -->
  <LhTooltip content="sx применяется к корневому элементу триггера" :sx="{ mt: 2, ml: 2 }">
    <LhButton type="primary">Отступ сверху 2, отступ слева 2</LhButton>
  </LhTooltip>
</template>

sx основан на базовом шаге 8px: mt: 2 → marginTop: 16px, ml: 2 → marginLeft: 16px. Полный список свойств см. в разделе Быстрая раскладка sx.

Способ срабатывания и состояния

С помощью trigger задается способ срабатывания; disabled отключает подсказку; manual в комбинации с visible включает ручное управление отображением; hideAfter управляет задержкой скрытия.

vue

<script setup lang="ts">
import { ref } from 'vue'
import { LhTooltip, LhButton } from '@lh-ui/vue3'

const manualVisible = ref(false)
</script>

<template>
  <!-- Срабатывает по клику -->
  <LhTooltip content="Срабатывает по клику" trigger="click">
    <LhButton>Срабатывает по клику</LhButton>
  </LhTooltip>
  <!-- Срабатывает при фокусе -->
  <LhTooltip content="Срабатывает при фокусе" trigger="focus">
    <LhButton>Срабатывает при фокусе</LhButton>
  </LhTooltip>
  <!-- Отключённая подсказка -->
  <LhTooltip content="Отключённая подсказка" disabled>
    <LhButton type="info" disabled>Отключённая подсказка</LhButton>
  </LhTooltip>
  <!-- Ручное управление -->
  <LhTooltip content="Ручное управление" manual :visible="manualVisible">
    <LhButton @click="manualVisible = !manualVisible">Переключить вручную</LhButton>
  </LhTooltip>
  <!-- Скрытие с задержкой -->
  <LhTooltip content="Скрытие с задержкой 1 секунда" :hide-after="1000">
    <LhButton>Скрытие с задержкой</LhButton>
  </LhTooltip>
</template>

vue

<script>
import { LhTooltip, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhTooltip, LhButton },
  data() {
    return {
      manualVisible: false,
    }
  },
}
</script>

<template>
  <!-- Срабатывает по клику -->
  <LhTooltip content="Срабатывает по клику" trigger="click">
    <LhButton>Срабатывает по клику</LhButton>
  </LhTooltip>
  <!-- Срабатывает при фокусе -->
  <LhTooltip content="Срабатывает при фокусе" trigger="focus">
    <LhButton>Срабатывает при фокусе</LhButton>
  </LhTooltip>
  <!-- Отключённая подсказка -->
  <LhTooltip content="Отключённая подсказка" disabled>
    <LhButton type="info" disabled>Отключённая подсказка</LhButton>
  </LhTooltip>
  <!-- Ручное управление -->
  <LhTooltip content="Ручное управление" manual :visible="manualVisible">
    <LhButton @click="manualVisible = !manualVisible">Переключить вручную</LhButton>
  </LhTooltip>
  <!-- Скрытие с задержкой -->
  <LhTooltip content="Скрытие с задержкой 1 секунда" :hide-after="1000">
    <LhButton>Скрытие с задержкой</LhButton>
  </LhTooltip>
</template>

openDelay / closeDelay — это алиасы showAfter / hideAfter соответственно, используйте любой из них по своему усмотрению.

Тема и внешний вид

С помощью effect переключается светлая/тёмная тема, bgColor задает пользовательский цвет фона, maxWidth ограничивает максимальную ширину, а teleportTarget указывает точку монтирования всплывающего слоя.

vue

<script setup lang="ts">
import { LhTooltip, LhButton } from '@lh-ui/vue3'
</script>

<template>
  <!-- Тёмная тема -->
  <LhTooltip content="Тёмная тема" effect="dark">
    <LhButton>Тёмная тема</LhButton>
  </LhTooltip>
  <!-- Светлая тема -->
  <LhTooltip content="Светлая тема" effect="light">
    <LhButton>Светлая тема</LhButton>
  </LhTooltip>
  <!-- Пользовательский цвет фона -->
  <LhTooltip content="Пользовательский цвет фона" bg-color="#5a3fa8">
    <LhButton>Пользовательский цвет фона</LhButton>
  </LhTooltip>
  <!-- Максимальная ширина -->
  <LhTooltip content="Этот длинный текст будет ограничен шириной 160px и перенесётся автоматически" :max-width="160">
    <LhButton>Максимальная ширина 160px</LhButton>
  </LhTooltip>
  <!-- Пользовательская точка монтирования -->
  <LhTooltip content="Всплывающий слой, примонтированный к #app" teleport-target="#app">
    <LhButton>Пользовательская точка монтирования</LhButton>
  </LhTooltip>
</template>

vue

<script>
import { LhTooltip, LhButton } from '@lh-ui/vue3'

export default {
  components: { LhTooltip, LhButton },
}
</script>

<template>
  <!-- Тёмная тема -->
  <LhTooltip content="Тёмная тема" effect="dark">
    <LhButton>Тёмная тема</LhButton>
  </LhTooltip>
  <!-- Светлая тема -->
  <LhTooltip content="Светлая тема" effect="light">
    <LhButton>Светлая тема</LhButton>
  </LhTooltip>
  <!-- Пользовательский цвет фона -->
  <LhTooltip content="Пользовательский цвет фона" bg-color="#5a3fa8">
    <LhButton>Пользовательский цвет фона</LhButton>
  </LhTooltip>
  <!-- Максимальная ширина -->
  <LhTooltip content="Этот длинный текст будет ограничен шириной 160px и перенесётся автоматически" :max-width="160">
    <LhButton>Максимальная ширина 160px</LhButton>
  </LhTooltip>
  <!-- Пользовательская точка монтирования -->
  <LhTooltip content="Всплывающий слой, примонтированный к #app" teleport-target="#app">
    <LhButton>Пользовательская точка монтирования</LhButton>
  </LhTooltip>
</template>

Props

Свойство	Описание	Тип	Значение по умолчанию
content	Содержимое подсказки	`string`	`''`
placement	Положение подсказки	`"top" \| "top-start" \| "top-end" \| "bottom" \| "bottom-start" \| "bottom-end" \| "left" \| "left-start" \| "left-end" \| "right" \| "right-start" \| "right-end"`	`'top'`
trigger	Способ срабатывания	`"hover" \| "click" \| "focus"`	`'hover'`
disabled	Отключена ли подсказка	`boolean`	`false`
manual	Ручное управление отображением	`boolean`	`false`
visible	Состояние отображения при ручном управлении	`boolean`	—
showAfter	Задержка показа (мс)	`number`	`0`
hideAfter	Задержка скрытия (мс)	`number`	`0`
openDelay	Задержка показа (мс), алиас showAfter	`number`	—
closeDelay	Задержка закрытия	`number`	—
effect	Тема	`"dark" \| "light"`	`'dark'`
type	Встроенный тип цвета темы (переопределяет цвет фона effect)	`"primary" \| "success" \| "warning" \| "danger" \| "info"`	—
bgColor	Пользовательский цвет фона (переопределяет цвет фона effect и type)	`string`	—
maxWidth	Максимальная ширина	`string \| number`	`'200px'`
teleportTarget	Цель Teleport (селектор или элемент, по умолчанию body)	`string \| HTMLElement`	`'body'`
themeVars	Переменные темы на уровне компонента, переопределяют конфигурацию ConfigProvider	`{ [x: string]: string; }`	—
bgPattern	Фоновый узор на уровне компонента, переопределяет конфигурацию ConfigProvider	`string`	—
sx	Свойства быстрой раскладки sx (применяются к корневому элементу триггера)	`LhSxProps`	—

Примечание: значение 'click' для trigger в настоящее время не реализовано (поведение аналогично 'hover'), переключение по клику будет добавлено в следующих версиях.

Слоты

Слот	Описание
default	Элемент-триггер подсказки (текст подсказки задаётся через свойство `content`)

Методы

Через ref можно вызывать методы, предоставляемые компонентом:

Метод	Описание
show	Немедленно показать подсказку
hide	Немедленно скрыть подсказку
toggle	Переключить состояние отображения подсказки

Доступность

Всплывающий слой имеет role="tooltip"; при показе корневому элементу триггера автоматически назначается aria-describedby, ссылающийся на всплывающий слой, а при скрытии автоматически удаляется, не оставляя висящих ссылок
Доступность с клавиатуры: при способах срабатывания hover / focus попадание фокуса клавиатуры на триггер (focusin) также показывает подсказку, а уход фокуса автоматически скрывает её, что соответствует шаблону tooltip из WAI-ARIA APG; способ срабатывания click не реагирует на фокус
Внутри триггера следует размещать элементы, получающие фокус (например, кнопки, ссылки): обычный текст не может быть сфокусирован с клавиатуры, и подсказка будет недоступна для пользователей клавиатуры

Типы

Экспортируемые компонентом структуры TypeScript (автоматически извлечено из packages/components/tooltip/src/types.ts и исходников @lh-ui/share/core/*; раскройте каждый раздел, чтобы увидеть полное определение; описания свойств — в таблице Props выше):

LhTooltipPlacement

/**
 * Типы Tooltip
 */
export type LhTooltipPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'

LhTooltipTrigger

export type LhTooltipTrigger = 'hover' | 'click' | 'focus'

LhTooltipEffect

export type LhTooltipEffect = 'dark' | 'light'

LhTooltipType

export type LhTooltipType = 'primary' | 'success' | 'warning' | 'danger' | 'info'

LhTooltipProps

/**
 * Props компонента Tooltip
 */
export interface LhTooltipProps {
  /** Текст подсказки */
  content?: string
  /** Положение отображения */
  placement?: LhTooltipPlacement
  /** Способ срабатывания */
  trigger?: LhTooltipTrigger
  /** Отключена ли подсказка */
  disabled?: boolean
  /** Ручное управление отображением */
  manual?: boolean
  /** Состояние отображения при ручном управлении */
  visible?: boolean
  /** Задержка показа (мс) */
  showAfter?: number
  /** Задержка скрытия (мс) */
  hideAfter?: number
  /** Задержка показа (мс), алиас showAfter */
  openDelay?: number
  /** Задержка закрытия */
  closeDelay?: number
  /** Тема */
  effect?: LhTooltipEffect
  /** Встроенный тип цвета темы (переопределяет цвет фона effect) */
  type?: LhTooltipType
  /** Пользовательский цвет фона (переопределяет цвет фона effect и type) */
  bgColor?: string
  /** Максимальная ширина */
  maxWidth?: string | number
  /** Цель Teleport (селектор или элемент, по умолчанию body) */
  teleportTarget?: string | HTMLElement
  /** Переменные темы на уровне компонента, переопределяют конфигурацию ConfigProvider */
  themeVars?: Record<string, string>
  /** Фоновый узор на уровне компонента, переопределяет конфигурацию ConfigProvider */
  bgPattern?: string
  /** Свойства быстрой раскладки sx (применяются к корневому элементу триггера) */
  sx?: LhSxProps
}

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

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

Различные положения

Пользовательская задержка

Локализация

Быстрая раскладка sx

Способ срабатывания и состояния

Тема и внешний вид

API Tooltip

Props

Слоты

Методы

Доступность

Типы

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

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

Различные положения ​

Пользовательская задержка ​

Локализация ​

Быстрая раскладка sx ​

Способ срабатывания и состояния ​

Тема и внешний вид ​

API Tooltip ​

Props ​

Слоты ​

Методы ​

Доступность ​

Типы ​

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

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

Различные положения

Пользовательская задержка

Локализация

Быстрая раскладка sx

Способ срабатывания и состояния

Тема и внешний вид

API Tooltip

Props

Слоты

Методы

Доступность

Типы