Виджет подсказки Elementor - добавляйте подсказки о наведении в любом месте

Напишите подсказку, выберите, где она появится, выберите "Навести" или "Щелкнуть", и все готово. Никаких дополнительных плагинов не требуется.

Элемент Tooltip - это автономный виджет Elementor. Перетащите его рядом с полем формы, внутри таблицы цен или рядом с запутанным термином, и он отобразит собственный пузырь триггера плюс всплывающей подсказки. Если вы хотите прикрепить всплывающую подсказку к кнопке, значку или разделу, которые уже существуют на странице, используйте Расширение ToolTips вместо.

Что можно сделать с виджетом Tooltip

Гибкий контроль контента и размещения

Контроль размещения

Напишите текст подсказки, затем выберите, где появляется пузырь: верхний, нижний, левый, правый, плюс начальный и конечный варианты. Тонкая настройка со смещениями пикселей X и Y, чтобы пузырь никогда не покрывал то, что объясняет.

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

Стайлинг: нормальное и зависающее состояния

Разделите триггер и пузырь отдельно. Установите фон, цвет текста, типографику, заполнение, радиус границы, границы и тень коробки. Каждое свойство имеет независимый контроль для нормального состояния и состояния зависания.

  • Совпадайте цвета бренда точно, а не с серыми по умолчанию браузером.
  • Делайте подсказки тонкими (контур призрака) или громкими (твердая таблетка с тенью) в зависимости от контекста.
  • Обратная связь по наведению стилей, чтобы пользователи знали, что элемент интерактивен.
Учебник по стилю Master Addons - руководство по элементу богатого стиля и визуальной настройки
Интерактивное поведение и анимация

Триггер и анимация

Триггер на hover для быстрых подсказок, нажать для заметок, которые должны оставаться открытыми (это работает лучше на сенсорных экранах), или с пользовательским триггером.Выберите входную анимацию и установить продолжительность и задержку скрыть.Включите Следуйте курсор, если вы хотите, чтобы пузырь следовал за мышью, что подходит карты и диаграммы.

  • Наведите курсор на микрокопию рабочего стола; нажмите, чтобы получить постоянные подсказки, удобные для мобильных устройств.
  • Тонкий вход с затуханием или масштабированием привлекает внимание, не раздражая пользователя.
  • Скрытая задержка предотвращает мерцание подсказки, когда курсор проходит мимо.

Элемент или Расширение: какой вам нужен?

Эта страница (Элемент подсказки, бесплатно): вам нужен новый подсказка на странице Виджет приносит свой триггер, который может быть текстом, значком или изображением.

Расширение всплывающих подсказок (Pro): у вас уже есть кнопка, изображение или заголовок на странице, и вам нужна подсказка, прикрепленная к ней.

Обычные случаи использования

  • Формы: “Password нуждается в 12+ символах” рядом с входом, без удлинения формы.
  • Таблицы цен: определить “per seat” против “per workspace” в ряд.
  • Кнопки: уточнить, что происходит после щелчка (“Карта не требуется”).
  • Команда/списки: роль, фрагмент биографии или ярлык контакта при наведении.
  • Включение: короткие инструкции рядом с новыми функциями или виджетами информационной панели.
Просмотрщик шаблонов
Фейсбук
Твиттер
WhatsApp
Копировать ссылку
Купить сейчас
Наложение листа спецификации
Наложение листа спецификации
Таблица сравнения планов
Таблица сравнения планов
Дегустация карточек
Дегустация карточек
Дизайн плиток жетонов
Дизайн плиток жетонов
Аннотированная юридическая статья
Аннотированная юридическая статья
Карта ярлыков клавиатуры
Карта ярлыков клавиатуры
Региональная таблица простоев - всплывающая подсказ
Региональная таблица простоев - всплывающая подсказ
Пошатный портретный ряд - всплывающая подсказка
Пошатный портретный ряд - всплывающая подсказка
Совет с подробной информацией о члене команды
Совет с подробной информацией о члене команды
Многонаправленные всплывающие подсказки
Многонаправленные всплывающие подсказки
Расширенные триггеры подсказок и щелчков
Расширенные триггеры подсказок и щелчков

Как добавить всплывающую подсказку в Elementor

  • Бросьте виджет.В Elementor выполните поиск по “Tooltip” в разделе "Мастер-аддоны" и перетащите его туда, где принадлежит подсказка.
  • Записать и разместить.Введите текст подсказки, установите триггер (наведите или щелкните), выберите размещение и смещения.
  • Стиль это. на вкладке Стиль, дизайн Нормальный и Hover состояния: цвета, типографика, радиус, тень. Опубликовать.
  • Хотите скриншоты каждой обстановки? Читайте наше руководство дальше как добавить всплывающую подсказку в Elementor.

Часто задаваемые вопросы для подсказки

Узнайте о наиболее часто задаваемых пользователями запросах о Tooltip и найдите ответы в одном месте.
Для чего нужен элемент Tooltip?

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

Элемент представляет собой бесплатный автономный виджет со своим триггером. The Расширение ToolTips является частью Pro и прикрепляет всплывающую подсказку к виджету, разделу или контейнеру, который уже на странице. оба имеют Follow Cursor, предустановки размещения и триггеры наведения или щелчка. Нужен новый намек? использовать элемент Нужны всплывающие подсказки по вещам, уже на странице? использовать расширение.

Да. На вкладке "Стиль" есть независимые элементы управления "Нормальный" и "Наведение" для фона, текста, границ, радиуса и тени.

Как контролировать, где появляется пузырь?

Используйте предустановки размещения (верхний, нижний, левый, правый, а также начальный и конечный варианты), затем подталкивайте смещения X и Y в пикселях.

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

Нет. загружает только свои собственные небольшие CSS и JS, когда присутствует на странице. горстка всплывающих подсказок на странице не оказывает заметного влияния.

Виджеты и расширения трендовых элементов

Создавайте сложные веб-сайты за меньшее время.

Расширение Master Addons Glassmorphism для Elementor: карты из матового стекла с элементом управления значением размытия, установленным в 20px

Стекломорфизм

Главная Бесплатный элемент Расширение стекломорфизма: эффект матового стекла в одном переключении Стекломорфизм - это матовый...
Посмотреть детали
Расширение Master Addons Container Extras для Elementor: контейнер с максимальной шириной 1400px, с регуляторами максимальной ширины, максимальной высоты, минимальной ширины и минимальной высоты

Дополнительные контейнеры

Главная Элементор Контейнер Максимальная ширина и максимальная высота Контролирует контейнер Дополнительно является бесплатным Мастер...
Посмотреть детали
Расширение Master Addons Patterns для Elementor: герой со стилем Purple Gradient Grid Left, еще тремя стилями шаблонов и панелью Enable Pattern

Шаблоны

Главная 70+ бесплатных шаблонов фона элементара - это бесплатное расширение Master Addons, которое добавляет...
Посмотреть детали
Расширение Master Addons Post/Page Duplicator для Elementor: ссылка на строку MA Duplicator в списке WordPress Pages, создающая целевую страницу - [Дублированный № 128] черновик

Дубликатор сообщений/страниц

Главная Дублировать страницы Элементор и сообщения в один клик Пост/Пейдж Дупликатор является бесплатным Мастер...
Посмотреть детали
Расширение Master Addons Reading Progress Bar для Elementor: синяя полоса на 42% заполнена в верхней части страницы политики конфиденциальности с настройками включения, положения, высоты и цвета заполнения

Прогресс-бар чтения

Главная Добавить панель прогресса чтения в WordPress (Элементор) Панель прогресса чтения бесплатна...
Посмотреть детали