Від автора: не так давно я пропрацював невеликий урок по створенню простих тултипов на чистому CSS (без додаткових HTML-тегів і JS). Трохи пізніше я використав цю техніку в своєму проекті і придумав кілька порад щодо того, як зробити зринаючі підказки. ще краще. Ця стаття – покроковий урок, який допоможе зрозуміти ці CSS-поради, щоб і ви могли створювати зринаючі підказки. на чистому CSS. До кінця статті ви навчитеся додавати тултип до будь-якого елементу з допомогою простого атрибута.
Проблема
Мені потрібно було створити кастомный тултип в свій проект.
Спочатку я загуглил «CSS Tooltip Generator» і знайшов парочку генераторів. Генератори додавали span з абсолютним позиціонуванням всередину елемента, до якого потрібно додати тултип.
Але мій проект вже був завершений, я не хотів піднімати код і додавати всі ці span’и. Це забрало б у мене якийсь час і ускладнило HTML. Повинен був бути спосіб краще.
Зрештою, я знайшов відмінний урок на YouTube за тултипам. Там для створення зринаючі підказки використовували селектори :: before :: after. Дивіться відео за посиланням. Трюк досить розумний і чистий, але не загальний.
Покращуємо рішення
В цій частині я зроблю трюк більш загальним, а також ми ближче познайомимося з парочкою CSS-властивостей. Нам потрібно щось подібне:
click here !!
Крім цього необхідно, щоб можна було легко позиціонувати тултип:
click here !!
По-перше, як і у відео, ми додамо псевдоелементи before і after до button.
::after ::before дозволяють вставляти контент на сторінку з CSS перед і після контенту елемента. Принцип їх роботи:
div::after {
content: “after”;
}
div::before {
content: “before”;
}
Результат приблизно наступний:
after
Розберемо по крокам
Крок 1: додаємо атрибут зринаючі підказки ось так:
click Me !!
Тут нам потрібні псевдоелементи ::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-код кнопки:
click here !!
Позиція зринаючі підказки може бути 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 показаний результат (можете подивитися код):
