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

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

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

Проблема

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

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

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

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

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

В этой части я сделаю трюк более общим, а также мы поближе познакомимся с парочкой 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.

В ::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.

Самые свежие новости 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