САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ
×

CSS Учебник

CSS Главная CSS Введение CSS Синтаксис CSS Селекторы CSS Подключение CSS Комментарии CSS Цвет CSS Фон CSS Границы CSS Отступ cнаружи CSS Отступы внутри CSS Высота и ширина CSS Бокс модель CSS Контур CSS Текст CSS Шрифты CSS Иконки CSS Ссылки CSS Списки CSS Таблицы CSS Дисплей CSS Макс. ширина CSS Позиционирование CSS Переполнение CSS Поплавок CSS Линейный блок CSS Выравнивание CSS Комбинаторы CSS Псевдо-классы CSS Псевдо-элементы CSS Прозрачность CSS Панель навигации CSS Выпадающий CSS Галерея CSS Спрайты CSS Атрибуты селекторов CSS Формы CSS Счетчики CSS Макет сайта CSS Еденицы измерений CSS Особенности

CSS3 Учебник

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

CSS3 Адаптивный дизайн

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

CSS Сетка

Сетка Введение Сетка Контейнер Сетка Пункт

CSS Примеры

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

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

CSS Справочник CSS Селекторы CSS Функции CSS Звук CSS Веб Шрифты CSS Анимации CSS Длины CSS PX-EM Конвертер CSS Цвета CSS Значение Цвета CSS по Умолчанию CSS Символы CSS Поддержка

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%) от "hoverable" в тексте (<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 к тому же. Это будет держать стрелку по центру.

The 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;
}
Попробуйте сами »