НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

CSS Підручник

CSS СТАРТ CSS Інтро CSS Синтаксис CSS Селектори CSS Як підключити CSS Коментарі CSS Кольори CSS Фони CSS Межі CSS Поля CSS Внутрішній відступ CSS Висота/Ширина CSS Блочна модель CSS Контур CSS Текст CSS Шрифти CSS Іконки CSS Посилання CSS Списки CSS Таблиці CSS Display CSS Max-Width CSS Position CSS Z-index CSS Overflow CSS Float CSS Inline-Block CSS Вирівнювання CSS Комбінатори CSS Псевдо-класи CSS Псевдо-елементи CSS Непрозорість CSS Панель навігації CSS Випадаючі списки CSS Галерея зображень CSS Спрайти зображень CSS Селектори атрибутів CSS Форми CSS Лічильники CSS Макет веб-сайту CSS Одиниці CSS Специфічності CSS !important CSS Математичні функції

CSS Розширений

CSS Закруглені кути CSS Межі зображень CSS Фони CSS Кольори CSS Кольори. Ключові слова CSS Градієнти CSS Тіні CSS Ефекти тексту CSS Веб-шрифти CSS 2D Трансформації CSS 3D Трансформації CSS Переходи CSS Анімації CSS Підказки CSS Стилі зображень CSS Image Reflection CSS Підгонка об'єкту CSS object-position CSS Masking CSS Кнопки CSS Нумерація сторінок CSS Кілька стовпців CSS Користувальницький інтерфейс CSS Змінні CSS Розміри блоків CSS Медіа-запити CSS Приклади медіа-запитів CSS Flexbox

CSS Адаптивний

RWD Інтро RWD Область перегляду RWD Вигляд сітки RWD Медіа-запити RWD Зображення RWD Відео RWD Фреймворки RWD Шаблони

CSS Grid (Сітка)

Grid Інтро Grid Контейнер Grid Елементи

CSS SASS

Підручник

CSS Приклади

CSS Шаблони CSS Приклади CSS Вікторина CSS Вправи CSS Сертифікат

CSS Довідники

CSS Довідник CSS Селектори CSS Функції CSS Довідник аудіо CSS Безпечні веб-шрифти CSS Анімація CSS Одиниці CSS PX-EM Конвертер CSS Кольори CSS Значення кольору CSS Значення за замовчуванням CSS Підтримка браузерами

CSS3. Уроки W3Schools для початківців українською мовою

En

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