Як робиться в html підказка?

34

Від автора: здрастуйте. Підказка — це невеликий пояснювальний текст, який з’являється при наведенні на якийсь елемент, зазвичай на картинку. Сьогодні ми подивимося, як можна зробити в html спливаючу підказку різними способами.

Стандартна підказка

За замовчуванням за висновок пояснення тексту відповідає атрибут title. Його можна вказувати різних елементів, але зазвичай використовують тільки для картинок, щоб пояснити, що на них зображено.

В одній з минулих статей я використовував зображення тигра, щоб показати роботу з розмірами картинки. Якщо ви не проти, я використовую знову це зображення. Отже, для виведення підказки необхідно лише додати атрибут title і в ньому написати потрібний текст.

Як робиться в html підказка?

Там може бути як одне слово, так і декілька пропозицій. І ось так це виглядає:

Підказка з’являється плавно, не відразу після наведення, а через якийсь час. Це поведінка, закладене за замовчуванням.

Основна проблема такої підказки — її неможливо стилізувати. Як вирішувати цю проблему? Доведеться робити підказку іншими способами. Зараз я покажу вам парочку.

Спосіб на чистому css

Дуже цікавий спосіб, який дозволяє красиво вивести підказку для зображення. Html-розмітка проста, тільки зображення потрібно укласти в блок-контейнер, якому повісимо ідентифікатор, щоб пізніше звернутися до нього в стилях:

Як робиться в html підказка?

Незрозумілим для вас тут може бути тільки атрибут data name. Справа в тому, що це так званий data-атрибут, який сам по собі нічого не робить, але його значення можна використовувати css і javascript, що робить його корисним у деяких випадках. Далі ви побачите це.

Отже, для початку опишемо стилі для контейнера. Відносне позиціонування потрібно нам тому, що ми будемо позиціонувати абсолютно блок з поясняющим текстом, щоб позиціонування відбувалося відносно батьківського блоку, а не всієї сторінки.

#tiger{
position: relative;
display: inline-block;
}

Блочно-рядкове відображення ж завадить блоку (а разом з ним і блоку з підказкою, якої ми створимо) розтягнутися на всю ширину вікна. Залишилося створити саму підказку. В css це дуже зручно робити за допомогою псевдоелемент. Ось так:

#tiger:hover:after {
content: attr(data name);
position: absolute;
left: 0;
bottom: 0;
background: rgba(5,13,156,.55);
color: #fff;
text-align: center;
font-family: cursive;
font-size: 14px;
padding: 3px 0;
width: 100%;
}

Коду багато, але нічого складного тут немає. Селектор #tiger:hover:after означає наступне: коли ми наводимо курсор на блок з картинкою, потрібно створити псевдоэлемент after (і далі в фігурних дужках перераховуються правила). Властивість content: attr(data name) задає текстове значення блоку. Воно буде дорівнює тому, що записано в атрибуті data name у блоку-обгортки картинки.

Далі позиціонуємо елемент абсолютно, задаємо довільно колір і фон, шрифт, вирівнювання, відступи і ширину. У результаті на виході виходить ось що:

Ця підказка з’являється при наведенні на картинку, але на відміну від стандартної вона робить це різко, а також сама поява відбувається безпосередньо в момент наведення. Плавне поява в даному випадку реалізувати не вийде, тому що для псевдоелемент плавні переходи не підтримуються.

Спосіб 2. Чистий css і плавне поява

Втім, зовсім трохи переписавши код можна домогтися плавного появи підказки, причому, знову ж таки, не використовуючи javascript.

Щоб самостійно перевірити, 2 ефекту, які я вам покажу далі, я рекомендую відкрити блокнот або будь-який зручний редактор коду і повторювати всі за мною. Щоправда, для цього ще потрібно підключити стильовий файл, хоча стилі можна писати і в html теги

Отже, код цього прикладу буде трохи відрізнятися, і це з тієї причини, що ми не будемо використовувати псевдоэлемент. Саме з-за нього неможливо було застосувати плавні зміни. Цього разу код буде виглядати так:

Як робиться в html підказка?

Суматранський тигр

CSS-код не зазнав якихось величезних змін:

#tiger2{
position: relative;
display: inline-block;
}
#tiger2 .text {
transition: all 0.6 s;
opacity: 0;
position: absolute;
left: 0; bottom: 0;
background: rgba(5,13,156,.55);
color: #fff;
text-align: center;
font-family: cursive;
font-size: 14px;
padding: 3px 0;
width: 100%;
transform: scale(0);
}
#tiger2:hover .text{
opacity: 1;
}

Прибираємо тільки властивість content, так як воно підтримується лише псевдоэлементами. Дописуємо властивість transition, яке і створює плавні переходи станів. Ну а opacity: 0 дасть нашому блоку з підказкою повну прозорість, тому він не буде відображатися на сторінці.

При наведенні на блок тепер достатньо повернути нормальну прозорість блоку з підказкою. Готове. Можете перевірити, елемент з’являється плавно.

З допомогою css3 можна приховати елемент і по-іншому. З допомогою трансформацій, наприклад. Замініть повну прозорість на ось таку властивість: transform: scale(0) і розмір блоку буде зменшений до нульового, так що його просто не буде на екрані. При наведенні на блок з картинкою слід повернути нормальний розмір ось так: transform: scale(1). В такому випадку ефект появи буде виглядати ще красивіше. Можете переконатися в цьому самі.

Як бачите, на css підказка може з’являтися повільно з красивими ефектами.

Інші способи

Ще більше можливостей вам може дати jQuery. За допомогою цієї бібліотеки можна написати код для виведення підказки як самостійно, так і знайти який-небудь плагін, який вже реалізує цю справу.

Наприклад, у фреймворку Bootstrap теж є багато готових компонентів і один з них, це як раз спливаючі підказки. Ви можете подивитися у документації до фреймворку приклади коду, які дозволяють створити ці підказки, і використовувати їх. Необов’язково підключати весь Bootstrap, можна взагалі залишити тільки такий компонент, як підказки (toolptips), завантажити і підключити тільки його.

Загалом, сьогодні я показав вам способи css, як зробити гарну підказку з різким і плавним появою, крім цього у вашому арсеналі є Bootstrap і jQuery. Вибирайте, що завгодно і реалізовуйте цікаві і красиві підказки на своїх сайтах!