Пошаговое руководство по созданию подсказок на чистом CSS

Рассказывает Юсуф Эль Азизи

Недавно я разбирал одно короткое руководство по созданию простых подсказок на чистом CSS (то есть без дополнительных HTML-элементов и кода на JavaScript). Позже я использовал эту технику в своём проекте и придумал пару приёмов её для улучшения. Здесь я хочу поделиться своим опытом.

Эта статья — пошаговое руководство, которое поможет понять приёмы создания подсказок, чтобы вы могли сделать это самостоятельно. Вы узнаете, как добавить подсказку к любому элементу, используя простой атрибут.

Проблема

Мне нужно было создать пользовательские подсказки для проекта.

Начал я с того, что загуглил «генератор подсказок CSS». Генераторов нашлось немало. Они добавляли span с абсолютной позицией внутри элемента, для которого нужна подсказка.

Мой проект уже был реализован, поэтому я не хотел возвращаться к коду и добавлять везде span. Это заняло бы много времени и усложнило бы HTML-код. Должен был быть путь проще.

Наконец, я нашёл на YouTube отличное руководство по подсказкам. Приём заключался в создании подсказок с помощью псевдоэлементов ::before и ::after:

Приём хорош, но не универсален.

Улучшение решения

В этой части я расскажу про более общий подход. Заодно мы изучим некоторые свойства CSS. Итак, мы хотим получить:

			<button tooltip="cодержимое подсказки"> Нажми сюда! </button>
		

Мы также сможем определять позицию подсказки:

			<button tooltip="содержимое подсказки" tooltip-position="left"> Нажми сюда! </button>
		

Прежде всего, как было сказано в видео, мы добавим к кнопке псевдоэлементы ::before и ::after. Они позволяют вставлять контент до или после содержимого элемента.

Работает это так:

			div::after {
 content: "после";
}
div::before {
 content: "до";
}
		

Результат будет таким:

			<div>
 до
 <!-- содержимое элемента здесь -->
 после
</div>
		

Шаг 1

Добавим атрибут подсказки:

			<button tooltip="простая подсказка"> Нажми на меня! </button>
		

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

Псевдоэлемент ::before используется для отображения содержимого подсказки. Мы добавляем его со свойством content и извлекаем значение атрибута подсказки. Значение для содержимого может быть строкой, значением атрибута элемента (как в нашем примере) или даже изображением url(path/image.png).

Чтобы это работало, расположение элемента кнопки должно быть относительным. То есть позиция всех элементов внутри кнопки зависит от позиции самой кнопки.

Мы также используем несколько приёмов с позиционированием, чтобы разместить подсказку в центре при помощи свойства transform.

Наш CSS:

			button{
  margin:auto;
  background: #3498db;
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
}

%save-sc0%{
  margin:20px;
  position:relative;
}

%save-sc1%::before {
    content: "";
    position: absolute;
    top:-6px;
    left:50%;
    transform: translateX(-50%);
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: rgba(0,0,0,0.7) transparent transparent transparent;
    z-index: 100;
    opacity: 0;
}

%save-sc2%::after {
    content: attr(tooltip);
    position: absolute;
    left:50%;
    top:-6px;
    transform: translateX(-50%)   translateY(-100%);
    background: rgba(0,0,0,0.7);
    text-align: center;
    color: #fff;
    padding:4px 2px;
    font-size: 12px;
    min-width: 80px;
    border-radius: 5px;
    pointer-events: none;
    opacity: 0;
}
		

Шаг 2

Переберём комбинации псевдоэлементов ::before и ::after, чтобы выбрать позицию подсказки. HTML нашей кнопки будет выглядеть так:

			<button tooltip="здесь подсказка" tooltip-position="left"> Нажми сюда! </button>
		

Подсказка может быть расположена cлева, справа, сверху или снизу:

			[tooltip-position='left']::before{
  left:0%;
  top:50%;
  margin-left:-12px;
  transform:translatey(-50%) rotate(-90deg) 
}
[tooltip-position='top']::before{
  left:50%;
}
[tooltip-position='bottom']::before{
  top:100%;
  margin-top:8px;
  transform: translateX(-50%) translatey(-100%) rotate(-180deg)
}
[tooltip-position='right']::before{
  left:100%;
  top:50%;
  margin-left:1px;
  transform:translatey(-50%) rotate(90deg)
}
[tooltip-position='left']::after{
  left:0%;
  top:50%;
  margin-left:-8px;
  transform: translateX(-100%)   translateY(-50%);
}
[tooltip-position='top']::after{
  left:50%;
}
[tooltip-position='bottom']::after{
  top:100%;
  margin-top:8px;
  transform: translateX(-50%) translateY(0%);
}
[tooltip-position='right']::after{
  left:100%;
  top:50%;
  margin-left:8px;
  transform: translateX(0%)   translateY(-50%);
}
		

Шаг 3

Осталось добавить анимацию для подсказки:

			%save-sc3%:hover::after, %save-sc4%:hover::before {
  opacity:1;
  transition-delay: 1.0s;
}
		

Вот конечный результат: