ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

CSS Учебник

CSS СТАРТ CSS Введение CSS Синтаксис CSS Селекторы CSS Как подключить CSS Цвета CSS background-color CSS border CSS margin CSS padding CSS height/width CSS Блочная модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS display CSS max-width CSS position CSS overflow CSS float/clear CSS inline-block CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS opacity/transparency CSS Панель навигации CSS Выпадающие списки CSS Галерея изображений CSS Спрайты изображений CSS Селекторы атрибутов CSS Формы CSS Счётчики CSS Макет веб-сайта CSS Единицы CSS Специфичности

CSS Продвинутый

CSS Закругленные углы CSS Границы изображения CSS Фоны CSS Цвета CSS Градиенты CSS Тени CSS Эффекты текста CSS Веб-шрифты CSS 2D Трансформации CSS 3D Трансформации CSS Переходы CSS Анимации CSS Подсказки CSS Стили изображений CSS Подгонка объекта CSS Кнопки CSS Нумерация страниц CSS Несколько столбцов CSS Пользовательский интерфейс CSS Переменные CSS Размеры блоков CSS Флексбокс CSS Медиа-запросы CSS Примеры медиа-запросов

CSS Адаптивный

RWD Введение RWD Область просмотра RWD Вид сетки RWD Медиа-запросы RWD Изображения RWD Видео RWD Фреймворки RWD Шаблоны

CSS Grid (Сетка)

Grid Введение Grid Контейнер Grid Элементы

CSS Примеры

CSS Шаблоны CSS Примеры CSS Викторина CSS Упражнения CSS Сертификат

CSS Справочники

CSS Справочник CSS Селекторы CSS Функции CSS Справочник аудио CSS Безопасные веб-шрифты CSS Анимация CSS Единицы CSS PX-EM Конвертер CSS Цвета CSS Значения цвета CSS Значения по умолчанию CSS Поддержка браузерами

CSS3. Уроки для начинающих

CSS Подсказка


Как создать всплывающие подсказки с помощью CSS?


Демо: Примеры подсказок

Подсказка часто используется для указания дополнительной информации о чем-либо, когда пользователь наводит указатель мыши на элемент:

Вверху Текст подсказки
Справа Текст подсказки
Внизу Текст подсказки
Слева Текст подсказки


Основная подсказка

Создайте всплывающую подсказку, которая появляется, когда пользователь наводит указатель мыши на элемент:

Пример

<style>
/* Контейнер подсказок */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* Если вы хотите точки под текстом при наведении мыши */
}

/* Текст подсказки */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Разместите текст всплывающей подсказки - см. Примеры ниже! */
  position: absolute;
  z-index: 1;
}

/* Показывать текст всплывающей подсказки при наведении указателя мыши на контейнер всплывающей подсказки */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">Наведите на меня
  <span class="tooltiptext">Текст подсказки</span>
</div>
Попробуйте сами »

Объяснение примера

HTML: Используйте элемент контейнера (например <div>) и добавьте в него класс "tooltip". Когда пользователь наведет курсор на этот <div>, он покажет текст всплывающей подсказки.

Текст всплывающей подсказки помещается внутри встроенного элемента (например, <span>) с class="tooltiptext".

CSS: Класс tooltip применяется position:relative, который необходим для позиционирования текста всплывающей подсказки (position:absolute). Примечание: Ниже приведены примеры того, как расположить подсказку.

Класс tooltiptext содержит фактический текст всплывающей подсказки. По умолчанию он скрыт и будет виден при наведении (см. выше). Мы также добавили в него несколько основных стилей: ширину 120px, цвет черного фона, цвет белого текста, центрированный текст, верхний и нижний отступы 5px.

CSS свойство border-radius используется для добавления закругленных углов к тексту всплывающей подсказки.

Селектор :hover используется для отображения текста всплывающей подсказки, когда пользователь наводит указатель мыши на <div> с class="tooltip".


Позиционирование всплывающих подсказок

В этом примере всплывающая подсказка находится справа (left:105%) от "наведенного" текста (<div>). Также обратите внимание, что top:-5px используется для размещения его в середине элемента контейнера. Мы используем число 5, потому что текст всплывающей подсказки имеет верхний и нижний отступы 5px. Если вы увеличите его отступ, также увеличьте значение свойства top, чтобы оно оставалось посередине (если это то, что вам нужно). То же самое необходимо, если вы хотите, чтобы подсказка была расположена слева.

Подсказка справа

.tooltip .tooltiptext {
  top: -5px;
  left: 105%;
}

Результат:

Наведите на меня Текст подсказки
Попробуйте сами »

Подсказка слева

.tooltip .tooltiptext {
  top: -5px;
  right: 105%;
}

Результат:

Наведите на меня Текст подсказки
Попробуйте сами »

Если вы хотите, чтобы всплывающая подсказка появлялась сверху или снизу, см. примеры ниже. Обратите внимание, что мы используем свойство margin-left со значением минус 60 пикселей. Это должно центрировать всплывающую подсказку выше / ниже текста, на который нужно навести текст. Устанавливается на половину ширины всплывающей подсказки (120/2 = 60).

Подсказка вверху

.tooltip .tooltiptext {
  width: 120px;
  bottom: 100%;
  left: 50%;
  margin-left: -60px; /* Используйте половину ширины (120/2 = 60), чтобы центрировать подсказку */
}

Результат:

Наведите на меня Текст подсказки
Попробуйте сами »

Подсказка внизу

.tooltip .tooltiptext {
  width: 120px;
  top: 100%;
  left: 50%;
  margin-left: -60px; /* Используйте половину ширины (120/2 = 60), чтобы центрировать подсказку */
}

Результат:

Наведите на меня Текст подсказки
Попробуйте сами »

Подсказка со стрелкой

Чтобы создать стрелку, которая должна появляться с определенной стороны всплывающей подсказки, добавьте "пустое" содержимое после всплывающей подсказки с классом псевдоэлемента ::after вместе со свойством content. Сама стрелка создана с использованием границ. Это сделает подсказку похожей на речевой пузырь.

Этот пример демонстрирует, как добавить стрелку внизу всплывающей подсказки:

Нижняя стрелка

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* В нижней части всплывающей подсказки */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

Результат:

Наведите на меня Текст подсказки
Попробуйте сами »

Объяснение примера

Поместите стрелку внутри подсказки: top: 100% поместит стрелку внизу всплывающей подсказки. left: 50% будет центрировать стрелку.

Примечание: Свойство border-width определяет размер стрелки. Если вы измените его, также измените значение margin-left на то же самое. Это будет располагать стрелку в центре.

Свойство border-color используется для преобразования содержимого в стрелку. Мы устанавливаем верхнюю границу черным, а остальное прозрачным. Если бы все стороны были черными, вы бы получили черный квадрат.

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

Верхняя стрелка

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* В верхней части всплывающей подсказки */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

Результат:

Наведите на меня Текст подсказки
Попробуйте сами »

Этот пример демонстрирует, как добавить стрелку слева от всплывающей подсказки:

Стрелка слева

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* Слева от всплывающей подсказки */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

Результат:

Наведите на меня Текст подсказки
Попробуйте сами »

Этот пример демонстрирует, как добавить стрелку справа от всплывающей подсказки:

Стрелка справа

.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; /* Справа от всплывающей подсказки */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}

Результат:

Наведите на меня Текст подсказки
Попробуйте сами »

Всплывающие подсказки (анимация)

Если вы хотите затемнить текст всплывающей подсказки, когда он собирается быть видимым, вы можете использовать свойство CSS transition вместе со свойством opacity, и оно становится от полностью невидимого до 100% видимым за указанное количество секунд (в нашем примере это 1 секунда):

Пример

.tooltip .tooltiptext {
  opacity: 0;
  transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
  opacity: 1;
}
Попробуйте сами »