Softonic

Генератор CSS-подсказок

Шаг 1 / 2
Далее

Всплывающие подсказки, это то, ради чего в проект часто первым делом подключают библиотеку JavaScript, хотя обычный псевдоэлемент ::after, управляемый атрибутом data-tooltip, покрывает 90 % реальных случаев. Этот генератор выдаёт именно те правила .tooltip и .tooltip::after, которые вам нужны: выберите положение сверху, снизу, слева или справа, настройте цвет фона и текста и скопируйте блок в свою таблицу стилей.

Как подключить подсказку к вашему HTML

  1. 1

    Выберите положение

    Сверху, снизу, слева или справа. Генератор использует `calc(100% + 8px)` вместе с нужным transform, благодаря чему всплывающее облачко плотно прилегает к элементу-триггеру.

  2. 2

    Выберите цвета

    Цвет фона применяется к облачку, а цвет текста, к надписи подсказки. Для читаемости сохраняйте контраст не ниже 4,5:1.

  3. 3

    Скопируйте CSS

    Вставьте сгенерированный блок в свою таблицу стилей. Он содержит правила `.tooltip`, `.tooltip::after` и `:hover`.

  4. 4

    Разметьте элемент-триггер

    Добавьте `class="tooltip" data-tooltip="Ваш текст"` к любому элементу. Псевдоэлемент `::after` читает атрибут через `content: attr(data-tooltip)`.

Подсказки на чистом CSS: что вы выигрываете и чем жертвуете

Подсказка только на CSS компактна, быстра и работает даже при отключённом JavaScript. Однако она находится в исходном порядке DOM и потому наследует ряд ограничений, которые приходится обходить при проектировании.

Что делает сгенерированный CSS

  • Задаёт элементу-триггеру position: relative, чтобы абсолютно позиционированная подсказка была привязана к нему.
  • Берёт текст из content: attr(data-tooltip), поэтому его не нужно дублировать.
  • Анимирует прозрачность через transition: opacity 0.15s, так что появление ощущается быстрым, но не резким.
  • Применяет к облачку pointer-events: none, чтобы оно никогда не перехватывало клики по триггеру.

Расчёт положения

Положение Правило смещения
сверху bottom: calc(100% + 8px); left: 50%; translateX(-50%)
снизу top: calc(100% + 8px); left: 50%; translateX(-50%)
слева right: calc(100% + 8px); top: 50%; translateY(-50%)
справа left: calc(100% + 8px); top: 50%; translateY(-50%)

Замечания по доступности

  • data-tooltip не читается программами чтения с экрана. Если информация важна, дополните её aria-label или видимым текстом.
  • Пользователям клавиатуры нужен не только :hover, но и :focus-visible. Расширьте сгенерированное правило до .tooltip:hover::after, .tooltip:focus-visible::after { opacity: 1; }.
  • Подсказки, обрезанные overflow: hidden у элемента-предка, исчезнут. Вынесите триггер за пределы обрезающего контейнера или переключитесь на всплывающее окно (popover), отрисовываемое через JavaScript, для плотных интерфейсов.

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

Псевдоэлемент сохраняет DOM чистым, избавляет от дублирования текста надписи и позволяет стилизовать подсказку, не опасаясь случайно задеть другие элементы. Плата за это, содержимое ::after не индексируется вспомогательными технологиями, поэтому важный текст стоит подкрепить aria-label.

Да, добавьте второй псевдоэлемент, например .tooltip::before, оформленный как блок с нулевой шириной и высотой и цветными границами. Это классический приём построения треугольника на CSS; сопутствующий инструмент «Генератор CSS-треугольников» из этого набора выдаст именно те объявления границ, которые вам нужны.

Добавьте transition-delay: 0.3s к правилу ::after, но сбросьте задержку до нуля при уходе курсора; либо используйте transition: opacity 0.15s 0.3s;, чтобы отложить появление, не задерживая исчезновение.

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

Сопутствующие инструменты

Справочная таблица ASCII

Полная таблица ASCII от 0 до 127 с десятичным, шестнадцатеричным, восьмеричным и двоичным представлением, а также записью числовых ссылок HTML, включая NUL, LF и DEL.

Справочник сочетаний клавиш

Ищите документированные сочетания по умолчанию для VS Code, Chrome и Bash с GNU Readline в macOS, Windows и Linux.

Справочник символов HTML

Справочник HTML-сущностей с поиском, их именованными и числовыми кодами, а также копированием специальных символов и знаков одним кликом.

Счетчик FPS

Измерьте FPS браузера через requestAnimationFrame: сглаживание, минимальная и максимальная частота кадров, порог предупреждения и график по желанию. Работает локально, без загрузок и API.

Генератор случайных букв

Генерируйте случайные буквы A-Z. Выберите количество, верхний или нижний регистр либо смешанный вариант для игр, заданий и уроков.

Генератор цветовой палитры

Создавайте монохромные, аналоговые, комплементарные, триадные или тетрадные палитры из базового HEX-цвета и экспортируйте готовые CSS-переменные.

Инструмент доступен на других языках