Спливаюча підказка з допомогою CSS: покрокова інструкція та способи видалення

Кучер В.Г.

Зірки сузір’я Центавра

  • Альфа Центавра
  • Бета Центавра
  • Тета Центавра
  • Гамма Центавра
  • Епсілон Центавра
  • Проксима Центавра

    Проксима Центавра (від лат. proxima — найближча) — червоний карлик, що відноситься до зоряній системі Альфа Центавра, найближча до Землі зірка після Сонця.

Оформимо і приховаємо блок підказки за допомогою CSS:

.star {
position: relative;
}
/* стилі для підказки */
.star .tooltip {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 100%;
}
/* стилі для декоративного трикутничка */
.star .tooltip:before { … }
/* поява підказки при наведенні */
.star:hover .tooltip { display: block; }

Цікаве:  Образ диска: що це таке і для чого потрібно?

Стилі списку і самої підказки можуть бути будь-якими, для стислості вони пропущені.

Розміщення контекстної підказки в окремому блоці дозволяє використовувати всередині неї зображення, форматувати текст і навіть створювати псевдоелементи для красивого оформлення.

Сторінка: 1 2 3 4 5 6 7