вНовости программирования

Пошаговое руководство по созданию подсказок на чистом 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; } [tooltip]{ margin:20px; position:relative; } [tooltip]::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; } [tooltip]::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

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

[tooltip]:hover::after, [tooltip]:hover::before {   opacity:1;   transition-delay: 1.0s; }

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

See the Pen CSS Tooltip by Eduardo Machado de Oliveira (@dudaskank) on CodePen.

Типичный программист.

Источник: Типичный программист