Webstacker

Онлайн-журнал с мира Web и Front End: Новости, статьи, хитрости и гайды на русском. Полезные и уникальные материалы для программистов и дизайнеров

Главная Фронтенд CSS Всплывающая подсказка на чистом CSS

Всплывающая подсказка на чистом CSS

  • Вещает:
  • Опубликовано:
  • Изменено:
Pure CSS | Всплывающая подсказка с помощью attr

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

Реализация

Для создания мы используем *[attr], который позволит нам добавить функционал ко всем необходимым тэгам. Пример html-кода:

<span attr="Каскадные таблицы стилей">
  CSS
</span>

А вот CSS-реализация выглядит так:

*[attr] {
  position: relative;
  cursor: help;
}

*[attr]:before {
  pointer-events: none;
  content: attr(attr);
  position: absolute;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}

*[attr]:hover:before {
  opacity: 1;
  visibility: visible;
}

// Ниже необязательные стили для визуальщины
*[attr] {
  color: green;
  border-bottom: 1px dotted green;
}

*[attr]:before {
  margin-top: 10px;
  max-width: 100vw;
  font-size: 12px;
  color: #000;
  border-radius: 5px;
  background-color: #f1f1f1;
  padding: 5px 10px;
}

*[attr]:after {
  opacity: 0;
  visibility: hidden;
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: 5px solid transparent;
  border-bottom-color: #f1f1f1;
}

*[attr]:before, *[attr]:after {
  top: 100%;
  left: 50%;
  transition: all .15s ease;
  transform: translate(-50%, 15px);
}

*[attr]:hover:before, *[attr]:hover:after {
  transition: all .15s ease;
  transform: translate(-50%, 0);
}

*[attr]:hover:after {
  opacity: 1;
  visibility: visible;
}

Элегантно, да? 🙂

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

Примеры

Также подписывайтесь на наш офигенный Телеграм-канал 🤘: постим крутые статьи, авторские мнения, новости и шутки из мира Web-разработки. Понравилась статья? Расскажи об этом друзьям!

Наш Telegram-канал