Тултипы v-tooltip

Компонент v-tooltip предназначен для создания всплывающих подсказок при наведении, фокусе или клике на целевой элемент. Он является оберткой вокруг другого элемента и управляет его поведением, отображая дополнительную информацию в удобной форме.

Структура компонента

<v-tooltip bottom>
  <template #activator="{ on, attrs }">
    <v-btn v-bind="attrs" v-on="on">Наведи на меня</v-btn>
  </template>
  <span>Подсказка!</span>
</v-tooltip>
  • #activator — слот, через который определяется элемент, вызывающий тултип. Важно использовать привязку v-bind="attrs" и v-on="on", чтобы события и атрибуты корректно передавались компоненту-активатору.
  • Содержимое слота default — это контент тултипа. Он может быть как простым текстом, так и любым Vue-шаблоном: иконки, изображения, кнопки.

Основные свойства

  • top, bottom, left, right — задают позицию тултипа относительно активатора.
  • open-delay — задержка в миллисекундах перед появлением тултипа после наведения.
  • close-delay — задержка перед скрытием.
  • disabled — полностью отключает тултип.
  • transition — анимация появления и скрытия. Можно использовать стандартные Vuetify-переходы, например fade-transition.
  • max-width — ограничение ширины тултипа.

Пример использования с задержкой и кастомной анимацией:

<v-tooltip bottom open-delay="500" close-delay="200" transition="scale-transition">
  <template #activator="{ on, attrs }">
    <v-icon v-bind="attrs" v-on="on">mdi-information</v-icon>
  </template>
  <span>Информация о функции</span>
</v-tooltip>

Программное управление

Тултипы можно открывать и закрывать программно через привязку к v-model:

<v-tooltip v-model="tooltipVisible" bottom>
  <template #activator="{ on, attrs }">
    <v-btn v-bind="attrs" v-on="on">Кнопка с управлением</v-btn>
  </template>
  <span>Контролируемая подсказка</span>
</v-tooltip>

<script setup>
import { ref } from 'vue'
const tooltipVisible = ref(false)
</script>

Здесь tooltipVisible принимает значения true или false для открытия или закрытия тултипа.

Стилизация тултипов

  • Использование классов Vuetify для цвета и фона:
<v-tooltip bottom>
  <template #activator="{ on, attrs }">
    <v-btn v-bind="attrs" v-on="on">Кнопка</v-btn>
  </template>
  <span class="pa-2 text-white" style="background-color: #1976d2; border-radius: 4px;">
    Синий подсказка
  </span>
</v-tooltip>
  • Можно использовать v-card внутри тултипа для сложного контента:
<v-tooltip bottom>
  <template #activator="{ on, attrs }">
    <v-btn v-bind="attrs" v-on="on">Карточка тултип</v-btn>
  </template>
  <v-card class="pa-3" max-width="200">
    <v-card-title>Заголовок</v-card-title>
    <v-card-text>Детальная информация с форматированием</v-card-text>
  </v-card>
</v-tooltip>

Интерактивные тултипы

По умолчанию тултипы скрываются при уходе мыши с активатора. Для интерактивных элементов используется open-on-hover, open-on-focus, и close-on-content-click:

<v-tooltip open-on-hover bottom>
  <template #activator="{ on, attrs }">
    <v-btn v-bind="attrs" v-on="on">Интерактивная кнопка</v-btn>
  </template>
  <v-card>
    <v-btn @click="alert('Нажато внутри тултипа')">Кнопка внутри тултипа</v-btn>
  </v-card>
</v-tooltip>

Это позволяет размещать внутри тултипа элементы с собственными действиями.

Адаптивное позиционирование

Vuetify автоматически пытается разместить тултип так, чтобы он не выходил за границы окна. Для дополнительного контроля можно использовать:

  • nudge-top, nudge-bottom, nudge-left, nudge-right — смещение тултипа относительно стандартного положения.
  • absolute — фиксированное позиционирование относительно документа.
  • manual — полный контроль через v-model.

Рекомендации по использованию

  • Тултипы подходят для краткой, вспомогательной информации.
  • Для сложных интерактивных подсказок лучше использовать v-menu с режимом activator.
  • Избегать перегруженного контента: слишком длинный текст ухудшает восприятие.
  • Всегда передавать attrs и on в слот активатора для корректной работы событий.

Практические примеры

  1. Иконка с подсказкой о действии
<v-tooltip top>
  <template #activator="{ on, attrs }">
    <v-icon v-bind="attrs" v-on="on">mdi-delete</v-icon>
  </template>
  Удалить элемент
</v-tooltip>
  1. Тултип с кастомной задержкой и цветом
<v-tooltip bottom open-delay="300">
  <template #activator="{ on, attrs }">
    <v-btn color="primary" v-bind="attrs" v-on="on">Подсказка</v-btn>
  </template>
  <span class="pa-2" style="background-color: #ff9800; color: white; border-radius: 4px;">Важно!</span>
</v-tooltip>
  1. Интерактивный тултип с кнопкой внутри
<v-tooltip open-on-hover bottom>
  <template #activator="{ on, attrs }">
    <v-btn v-bind="attrs" v-on="on">Меню действий</v-btn>
  </template>
  <v-card class="pa-3" max-width="180">
    <v-btn text @click="console.log('Редактировать')">Редактировать</v-btn>
    <v-btn text @click="console.log('Удалить')">Удалить</v-btn>
  </v-card>
</v-tooltip>

Эти примеры демонстрируют основные и продвинутые возможности v-tooltip, позволяя создавать как простые, так и интерактивные подсказки с кастомной стилизацией и контролем поведения.

Оглавление