Tooltip

Компонент Tooltip в Naive UI предназначен для отображения подсказок при наведении на элементы интерфейса. Он является оберткой над любым интерактивным элементом и позволяет показывать дополнительную информацию пользователю без загромождения интерфейса.

<template>
  <n-tooltip trigger="hover" placement="top" :show-arrow="true" content="Это подсказка">
    <n-button>Наведи на меня</n-button>
  </n-tooltip>
</template>

В данном примере компонент n-tooltip оборачивает кнопку. Атрибут trigger указывает, при каком действии показывать подсказку, а placement определяет позицию относительно элемента. Атрибут show-arrow отвечает за отображение стрелки подсказки.

Свойства Tooltip

1. trigger Определяет, как будет активироваться подсказка. Поддерживаются значения:

  • "hover" — по наведению курсора
  • "click" — по клику
  • "focus" — при фокусе на элементе
  • "manual" — управление отображением через v-model

2. placement Задает расположение подсказки относительно целевого элемента. Возможные значения: top, bottom, left, right, а также варианты с -start и -end для точной настройки позиции.

3. content Содержимое подсказки. Может быть строкой, числом или любым компонентом Vue с использованием слота default.

<n-tooltip placement="right">
  <template #default>
    <n-button>Наведи на меня</n-button>
  </template>
  <template #content>
    <div>
      <strong>Подсказка с кастомным содержимым</strong>
      <p>Можно использовать HTML или компоненты Vue</p>
    </div>
  </template>
</n-tooltip>

4. show-arrow Булевое значение, определяющее, будет ли у подсказки стрелка, указывающая на целевой элемент.

5. show Используется для ручного управления видимостью подсказки через реактивное состояние. Совместно с v-model:show позволяет динамически показывать или скрывать подсказку.

<script setup>
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <n-tooltip v-model:show="visible" content="Подсказка вручную">
    <n-button @click="visible = !visible">Показать/Скрыть</n-button>
  </n-tooltip>
</template>

Управление позиционированием

Tooltip использует библиотеку Floating UI для вычисления позиции, что обеспечивает корректное отображение даже при ограниченном пространстве. Можно настраивать с помощью свойств:

  • offset — смещение подсказки относительно целевого элемента
  • placement — основное направление
  • fallback-placements — массив альтернативных позиций, если основная не помещается
<n-tooltip content="Смещенная подсказка" placement="bottom" :offset="10">
  <n-button>Смещение 10px</n-button>
</n-tooltip>

Слоты и кастомизация

Tooltip предоставляет гибкую систему слотов для полной кастомизации:

  • default — элемент, к которому привязывается подсказка
  • content — кастомное содержимое подсказки
  • trigger — позволяет использовать нестандартные триггеры, например иконки или сложные компоненты
<n-tooltip>
  <template #trigger>
    <n-icon name="info" />
  </template>
  <template #content>
    <div>Информация об элементе</div>
  </template>
</n-tooltip>

Анимации и задержки

Для улучшения UX доступны свойства:

  • show-delay — задержка перед появлением подсказки
  • hide-delay — задержка перед скрытием
  • duration — время анимации
<n-tooltip content="Подсказка с задержкой" :show-delay="300" :hide-delay="200" :duration="250">
  <n-button>Наведи с задержкой</n-button>
</n-tooltip>

Взаимодействие с другими компонентами

Tooltip можно использовать совместно с Button, Icon, Input и любыми интерактивными элементами, не нарушая их событий. Для сложных случаев, таких как модальные окна или динамически изменяемые элементы, рекомендуется использовать v-model:show для точного контроля видимости.

Naive UI Tooltip сочетает простоту использования с мощной кастомизацией, позволяя создавать подсказки любой сложности: от стандартного текста до полностью интерактивных Vue-компонентов.

Оглавление