QTooltip всплывающие подсказки

Компонент QTooltip из библиотеки Quasar предназначен для создания всплывающих подсказок, которые появляются при наведении или фокусе на элемент. Он не рендерится сам по себе, а привязывается к другому компоненту через слот default.

<q-btn label="Наведи на меня">
  <q-tooltip>
    Это подсказка
  </q-tooltip>
</q-btn>

В этом примере подсказка появится при наведении курсора на кнопку. Компонент автоматически определяет позицию относительно целевого элемента.

Управление отображением

QTooltip поддерживает следующие параметры управления видимостью:

  • v-model — двусторонняя привязка для контроля состояния показа.
  • anchor — определяет сторону целевого элемента, к которой будет привязана подсказка (top, bottom, left, right, а также комбинации типа top-left).
  • self — указывает точку привязки самой подсказки (top, bottom, left, right, center).

Пример:

<q-btn label="Подсказка снизу" color="primary">
  <q-tooltip anchor="bottom" self="center" v-model="showTooltip">
    Подсказка отображается снизу
  </q-tooltip>
</q-btn>

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

const showTooltip = ref(false)
</script>

В этом примере показ подсказки можно контролировать через переменную showTooltip.

Настройка задержки и поведения

Для улучшения UX можно задавать задержку перед показом или скрытием подсказки с помощью свойств:

  • delay — задержка появления подсказки (в миллисекундах).
  • persistent — если установлено в true, подсказка не исчезает при уходе курсора.
  • transition-show и transition-hide — позволяют задать анимации появления и исчезновения.
<q-btn label="Задержка подсказки">
  <q-tooltip delay="500" transition-show="jump-down" transition-hide="jump-up">
    Подсказка с анимацией
  </q-tooltip>
</q-btn>

Задержка делает интерфейс более плавным, предотвращая случайное всплытие при быстром перемещении курсора.

Стилизация подсказок

Подсказки в Quasar легко стилизуются через классы и встроенные атрибуты:

  • color — основной цвет подсказки.
  • text-color — цвет текста.
  • class — для добавления пользовательских CSS-классов.
  • style — для инлайновых стилей.

Пример с кастомной стилизацией:

<q-btn label="Красная подсказка">
  <q-tooltip color="red" text-color="white" class="rounded-borders">
    Важная подсказка
  </q-tooltip>
</q-btn>

<style>
.rounded-borders {
  border-radius: 8px;
  font-weight: bold;
}
</style>

Всплывающие подсказки для разных компонентов

QTooltip может быть привязан к любому компоненту, который поддерживает слоты, включая:

  • QBtn — кнопки.
  • QIcon — иконки.
  • QInput — поля ввода.
  • QCard — карточки.

Пример для иконки:

<q-icon name="info" size="32px">
  <q-tooltip anchor="top">Информация о элементе</q-tooltip>
</q-icon>

Подсказка автоматически подстраивается под размер и позицию иконки.

Интерактивные подсказки

Можно сделать подсказку интерактивной, например, с кнопками или ссылками. Для этого важно использовать слот и управлять событиями внутри подсказки:

<q-btn label="Меню">
  <q-tooltip anchor="bottom">
    <div>
      <q-btn label="Действие 1" size="sm" flat />
      <q-btn label="Действие 2" size="sm" flat color="secondary" />
    </div>
  </q-tooltip>
</q-btn>

Такой подход позволяет добавлять сложный контент без потери функциональности подсказки.

Рекомендации по UX

  • Размещать подсказки там, где элемент не имеет очевидного значения.
  • Использовать короткие, информативные тексты.
  • Не перегружать подсказки интерактивными элементами, если это не требуется.
  • Настраивать позиции с учётом возможного выхода за пределы экрана (anchor + self).

Совместимость с мобильными устройствами

На мобильных устройствах всплывающие подсказки срабатывают при долгом нажатии вместо наведения курсора. Это важно учитывать при проектировании интерфейсов для сенсорных экранов.

<q-btn label="Мобильная подсказка">
  <q-tooltip anchor="top">
    Нажми и удерживай для просмотра
  </q-tooltip>
</q-btn>

Использование touch-hold событий позволяет контролировать поведение на мобильных устройствах.

Динамические подсказки

Содержимое подсказки может быть динамическим, основанным на данных компонента:

<q-btn label="Покажи количество">
  <q-tooltip>{{ itemCount }} элементов</q-tooltip>
</q-btn>

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

Изменение переменной itemCount автоматически обновляет текст подсказки, обеспечивая реактивность.

Комбинация с другими компонентами Quasar

QTooltip отлично сочетается с компонентами типа QChip, QAvatar, QCardSection, создавая богатый интерактивный интерфейс без необходимости писать собственные всплывающие решения.

<q-chip icon="info" color="primary">
  <q-tooltip anchor="bottom">
    Дополнительная информация о чипе
  </q-tooltip>
</q-chip>

QTooltip обеспечивает гибкий, лёгкий и мощный способ предоставления пользователю контекстной информации. Настройка позиций, задержек, стилей и динамического контента позволяет создавать интерфейсы любого уровня сложности без потери производительности и удобства использования.

Оглавление