От автора: не так давно я проработал небольшой урок по созданию простых тултипов на чистом CSS (без дополнительных HTML-тегов и JS). Чуть позже я использовал эту технику в своем проекте и придумал парочку советов по тому, как сделать тултипы еще лучше. Эта статья – пошаговый урок, который поможет понять эти CSS-советы, чтобы и вы могли создавать тултипы на чистом CSS. К концу статьи вы научитесь добавлять тултип к любому элементу с помощью простого атрибута.
Проблема
Мне нужно было создать кастомный тултип в свой проект.
Сначала я загуглил «CSS Tooltip Generator» и нашел парочку генераторов. Генераторы добавляли span с абсолютным позиционированием внутрь элемента, к которому нужно добавить тултип.
Но мой проект уже был завершен, я не хотел поднимать код и добавлять все эти span’ы. Это отняло бы у меня какое-то время и усложнило HTML. Должен был быть способ получше.
В конце концов, я нашел отличный урок на YouTube по тултипам. Там для создания тултипа использовали селекторы :: before и :: after. Смотрите видео по ссылке. Трюк довольно умный и чистый, но не общий.
Улучшаем решение
В этой части я сделаю трюк более общим, а также мы поближе познакомимся с парочкой CSS-свойств. Нам нужно что-то подобное:
|
1 |
<button tooltip="tooltip content here"> click here !! </button> |
Помимо этого необходимо, чтобы можно было легко позиционировать тултип:
|
1 |
<button tooltip="tooltip content here" tooltip-position="left" > click here !! </button> |
Во-первых, как и в видео, мы добавим псевдоэлементы before и after к button.
::after и ::before позволяют вставлять контент на страницу из CSS перед и после контента элемента. Принцип их работы:
|
1 2 3 4 5 6 |
div::after { content: “after"; } div::before { content: “before"; } |
Результат примерно следующий:
|
1 2 3 4 5 |
<div> before <!-- div content here --> after </div> |
Разберем по шагам
Шаг 1: добавляем атрибут тултипа вот так:
|
1 |
<button tooltip="simple tooltip here"> click Me !! </button> |
Здесь нам нужны псевдоэлементы ::after и ::before, которые будут представлять из себя простой прямоугольник с контентом тултипа. С помощью CSS создаем простой прямоугольник. Для этого добавляем рамку вокруг пустого элемента, который создается с помощью свойства content.
В ::before показывается контент тултипа. Псевдоэлемент добавляется со свойством content, в значение которого извлекается значение атрибута tooltip. Значение content может быть строкой, значением атрибута элемента, как в нашем примере, или даже изображением url(path/image.png).
Позиционирование button должно быть относительным. Другими словами, позиция всех элементов внутри button относительна позиции самой кнопки.
Добавим парочку трюков с позиционированием, чтобы центрировать тултип с помощью свойства transform.
Наш CSS-код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
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; } [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; } |
Шаг 2: меняем значения ::before и ::after, чтобы настроить позиционирование. HTML-код кнопки:
|
1 |
<button tooltip="tooltip here" tooltip-position="left"> click here !! </button> |
Позиция тултипа может быть right, left, top или bottom.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
[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: на последнем шаге мы добавляем простую hover анимацию к тултипу
В CodePen показан результат (можете посмотреть код):
Автор: Youssouf El Azizi
Источник: //medium.freecodecamp.com/
Редакция: Команда webformyself.
