Как сделать тултип на сайте — от CSS до no-code виджета

Тултип — короткая подсказка, которая появляется при наведении или фокусе на элементе. Если разбираетесь, как сделать тултип на сайте, у вас 4 пути: атрибут title, 8 строк CSS, JavaScript-библиотека или no-code виджет. Самый быстрый — поставить виджет: это занимает 2–3 минуты без правки кода и сразу дает привязку к воронке и аналитику.

Что такое тултип и чем он отличается от поп-апа и тоглтипа

Тултип появляется на короткий контекст и исчезает сам, когда пользователь убирает курсор или фокус. Поп-ап — модальное окно, которое перекрывает интерфейс и требует явного закрытия. Тоглтип переключается по клику и остается, пока пользователь не закроет его сам.

Простое правило: если подсказка короче одного предложения и помогает понять конкретную иконку или поле — это тултип. Если внутри есть форма, кнопка или ссылка — это уже поп-ап или тоглтип, и hover-логика тут вредна.

Как сделать тултип на чистом CSS

Минимальный рабочий вариант — родительский элемент с position: relative и абсолютно позиционированный псевдоэлемент:

<button class="hint" data-tip="Сохраняет автоматически каждые 30 секунд">
  Автосохранение
</button>

<style>
.hint { position: relative; }
.hint::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: #1a1a1a;
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms;
}
.hint:hover::after,
.hint:focus-visible::after { opacity: 1; }
</style>

Плюс этого подхода — ноль JavaScript и быстрая отрисовка. Минус — тултип не умеет переноситься на другую сторону, если у элемента нет места сверху, и не работает на мобильных устройствах, где hover отсутствует.

Как добавить тултип через JavaScript

JS нужен, когда тултип должен:

• автоматически переворачиваться, если упирается в край экрана;
• появляться с задержкой 200–500 мс, чтобы не мигать при случайном проведении мышью;
• закрываться по Esc и при потере фокуса;
• работать на тач-устройствах через долгое нажатие.

Готовые библиотеки — Floating UI (≈6 КБ gzipped), Tippy.js, Popper.js. Floating UI — современный преемник Popper, рассчитан позиционирование с учетом viewport. На крупных сайтах одна и та же библиотека отвечает и за тултипы, и за выпадающие меню — это экономит несколько КБ JS.

Как поставить тултип без кода через виджет Нотифлоу

В кабинете на cp.notiflow.ru зайдите в «Виджеты → Создать → Тултип». Дальше:

1. Укажите CSS-селектор элемента, рядом с которым показать подсказку (например, #price-info или .btn-export).
2. Введите текст и выберите сторону появления.
3. Настройте триггер — hover, focus, появление в viewport или клик по соседней иконке.
4. Включите ограничение «показывать одному пользователю N раз», чтобы подсказка не была вечной.

Скрипт Нотифлоу уже стоит на сайте после первой настройки чата — добавлять ничего не нужно. Тултип публикуется без деплоя, изменения в тексте применяются мгновенно.

Доступность тултипа: клавиатура, скринридеры, ARIA

Тултип обязан открываться по focus, а не только по hover. Для скринридеров элемент-триггер связывается с описанием через aria-describedby:

<button aria-describedby="tip-export">Экспорт</button>
<span role="tooltip" id="tip-export">Скачивает CSV за выбранный период</span>

role="tooltip" сообщает скринридеру, что элемент — подсказка к соседнему контролу. По нажатию Esc тултип закрывается. Текст не должен дублировать видимую подпись кнопки — иначе пользователь услышит ее дважды.

Когда тултип лучше заменить на поп-ап или продуктовый тур

Тултип не подходит, если:

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

Какие тултипы повышают конверсию

Рабочие сценарии из практики SaaS-продуктов:

• Объяснение поля формы, где пользователи часто ошибаются (формат телефона, минимум символов в пароле). Снижает долю отбракованных форм на 5–12%.
• Подсказка к иконке-кнопке без текста (export, share, lock). Помогает оператору и снижает обращения в поддержку.
• Ярлык над тарифной кнопкой («Подходит для команд до 10 человек»). На страницах с ценами поднимает CR кнопки выбранного тарифа.
• Объяснение причины недоступности кнопки («Доступно после подтверждения email»). Сокращает обращения «почему не работает».

Как замерить эффект тултипа

Без замера тултип превращается в декорацию. В Нотифлоу на каждый тултип считается:

• сколько раз он показался уникальным пользователям;
• сколько из них совершили целевое действие (клик, отправка формы, переход) в течение 30 секунд после показа;
• разница в конверсии между группами «увидел» и «не увидел» — это честный A/B-эффект;
• доля пользователей, которые наводили курсор, но не выполнили действие — слабый тултип-сигнал.

В коде эти метрики собираются вручную через dataLayer.push и Яндекс.Метрику, но требуется настройка целей и сегментов на каждый случай.

Часто задаваемые вопросы

Поставить тултип без правки кода можно за 2 минуты — зарегистрироваться в Нотифлоу. Для онбординга больше подойдет связка тултипов с другими подсказками — см. «Как сделать продуктовый тур» и «Чек-лист онбординга в SaaS». Подробнее о виджете подсказок — страница «Тултип».