Tooltip

Tooltip — это компонент для отображения всплывающей подсказки при наведении на элемент, фокусе или клике. В библиотеке Element Plus он используется для улучшения взаимодействия с пользователем, предоставляя дополнительную информацию без перегрузки интерфейса.

<template>
  <el-tooltip content="Это подсказка" placement="top">
    <button>Наведи на меня</button>
  </el-tooltip>
</template>
  • content — текст, отображаемый во всплывающем окне.
  • placement — позиция подсказки относительно целевого элемента. Возможные значения: top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end.
  • Целевой элемент — любой HTML- или Vue-компонент, на который наведен курсор или выполнено другое действие.

Настройка событий показа

Tooltip поддерживает несколько типов триггеров:

<el-tooltip content="Нажми для подсказки" trigger="click">
  <button>Кликни меня</button>
</el-tooltip>
  • trigger="hover" — по умолчанию, всплывает при наведении мыши.
  • trigger="click" — подсказка показывается по клику на элемент.
  • trigger="focus" — показывается при фокусе на элементе (например, input).
  • trigger="manual" — отображение управляется программно через v-model:visible.
<el-tooltip content="Управляемая подсказка" v-model:visible="visible">
  <button @click="visible = !visible">Показать/Скрыть</button>
</el-tooltip>

<script>
export default {
  data() {
    return {
      visible: false
    }
  }
}
</script>

Контроль задержки появления и скрытия

Можно настроить задержку отображения и скрытия подсказки с помощью атрибутов open-delay и hide-after.

<el-tooltip content="Подсказка с задержкой" open-delay="500" hide-after="1000">
  <button>Наведи на меня</button>
</el-tooltip>
  • open-delay — задержка перед показом подсказки в миллисекундах.
  • hide-after — время в миллисекундах, через которое подсказка автоматически скрывается.

Использование HTML и компонентов внутри Tooltip

В Element Plus можно использовать не только простой текст, но и HTML или Vue-компоненты:

<el-tooltip placement="right">
  <template #content>
    <div>
      <strong>Важно:</strong> Это <em>HTML-содержимое</em>
    </div>
  </template>
  <button>Наведи на меня</button>
</el-tooltip>
  • Слот #content позволяет полностью контролировать содержимое подсказки.
  • Можно вставлять любые компоненты Vue, включая кнопки, списки и изображения.

Размещение и поведение при переполнении

Tooltip автоматически корректирует свое положение при недостатке места:

  • Атрибут effect задает визуальный стиль подсказки: dark или light.
  • Атрибут popper-class позволяет добавить пользовательский CSS-класс для тонкой настройки стиля.
<el-tooltip content="С кастомным стилем" popper-class="custom-tooltip" placement="bottom">
  <button>Кастомный Tooltip</button>
</el-tooltip>

<style>
.custom-tooltip {
  background-color: #409eff;
  color: white;
  font-weight: bold;
}
</style>
  • Поддержка динамического позиционирования предотвращает обрезку подсказки за границами окна.

Интеграция с формами и другими компонентами

Tooltip часто используется совместно с формами и кнопками для отображения подсказок по валидации:

<el-form :model="form">
  <el-form-item label="Email">
    <el-tooltip content="Введите корректный email" placement="top">
      <el-input v-model="form.email"></el-input>
    </el-tooltip>
  </el-form-item>
</el-form>

<script>
export default {
  data() {
    return {
      form: {
        email: ''
      }
    }
  }
}
</script>
  • Tooltip может сопровождать любой интерактивный элемент, включая Input, Button, Select и другие.
  • Отлично подходит для контекстной подсказки в сложных интерфейсах.

Управление видимостью и методами API

Элемент Tooltip предоставляет методы через $refs:

<el-tooltip ref="tip" content="Программный контроль">
  <button @click="showTooltip">Показать подсказку</button>
</el-tooltip>

<script>
export default {
  methods: {
    showTooltip() {
      this.$refs.tip.doShow();
    },
    hideTooltip() {
      this.$refs.tip.doClose();
    }
  }
}
</script>
  • doShow() — открыть подсказку.
  • doClose() — закрыть подсказку.
  • Полезно при интеграции с динамическими интерфейсами и нестандартными триггерами.

Настройка направления стрелки и визуального оформления

  • Атрибут arrow-offset управляет положением стрелки относительно содержимого.
  • Атрибут popper-append-to-body определяет, добавляется ли всплывающее окно в body или остается внутри контейнера — важно для позиционирования в сложных разметках.
<el-tooltip content="С кастомной стрелкой" arrow-offset="20" popper-append-to-body="false">
  <button>Стрелка смещена</button>
</el-tooltip>
  • Использование этих настроек обеспечивает точное позиционирование и контроль над интерфейсом.

Применение в адаптивных интерфейсах

Tooltip автоматически адаптируется под мобильные и десктопные устройства:

  • На мобильных устройствах рекомендуется использовать trigger="click", так как hover не всегда применим.
  • Можно использовать медиазапросы для управления стилями через popper-class.
@media (max-width: 600px) {
  .custom-tooltip {
    font-size: 12px;
    padding: 4px 8px;
  }
}
  • Это позволяет сохранять читаемость и корректное отображение подсказок на любых устройствах.
Оглавление