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

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

От автора: не так давно я проработал небольшой урок по созданию простых тултипов на чистом CSS (без дополнительных HTML-тегов и JS). Чуть позже я использовал эту технику в своем проекте и придумал парочку советов по тому, как сделать тултипы еще лучше. Эта статья – пошаговый урок, который поможет понять эти CSS-советы, чтобы и вы могли создавать тултипы на чистом CSS. К концу статьи вы научитесь добавлять тултип к любому элементу с помощью простого атрибута.

Проблема

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

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

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

В конце концов, я нашел отличный урок на YouTube по тултипам. Там для создания тултипа использовали селекторы :: before и :: after. Смотрите видео по ссылке. Трюк довольно умный и чистый, но не общий.


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Улучшаем решение

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

<button tooltip="tooltip content here"> click here !! </button>

Помимо этого необходимо, чтобы можно было легко позиционировать тултип:

<button tooltip="tooltip content here" tooltip-position="left" > click here !! </button>

Во-первых, как и в видео, мы добавим псевдоэлементы before и after к button.

::after и ::before позволяют вставлять контент на страницу из CSS перед и после контента элемента. Принцип их работы:

div::after {
 content: “after";
}
div::before {
 content: “before";
}

Результат примерно следующий:

<div>
 before
 <!-- div content here -->
 after
</div>

Разберем по шагам

Шаг 1: добавляем атрибут тултипа вот так:

<button tooltip="simple tooltip here"> click Me !! </button> 

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Узнать подробнее

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

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

Добавим парочку трюков с позиционированием, чтобы центрировать тултип с помощью свойства 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;
}
[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-код кнопки:

<button tooltip="tooltip here" tooltip-position="left"> click here !! </button>

Позиция тултипа может быть right, left, top или bottom.

[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

Источник: https://medium.freecodecamp.com/

Редакция: Команда webformyself.


Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree