is_реклам:

пошук, категорії та ін. показати ▼

Як зробити прості підказки на CSS3

Як зробити прості підказки на CSS3
автор опубліковано

Підказки є відмінним способом для виведення додаткової інформації за допомогою простого наведення курсора миші на текст або зображення. Їх можна використовувати, наприклад, для виведення назв картинок, опису посилань, або будь-якої іншої інформації, яка може бути корисна користувачу вашого ресурсу.

У даному пості розглянемо, як створити прості підказки за допомогою HTML і CSS, які будуть виводити вміст атрибута data-title для посилання. Приклад такого принципу в роботі:

Створимо просту розмітку для посилання. Визначимо для неї атрибут data-title, в якому буде міститися текст підказки, і клас:


<a data-title="Текст підказки." class="tooltip">Посилання</a>

Задамо базові стилі для класу tooltip:

.tooltip{
    display: inline;
    position: relative;
}

Тепер підказка буде виводиться в один рядок з посиланням з використанням відносного позиціонування. Далі визначимо заокруглені кути і позиціонуємо її зверху посилання:

.tooltip:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(data-title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: 220px;
}

Ось що детальніше робить даний шматок коду.
Ми використовуємо псевдо-клас :hover, який вибирає елемент при наведенні на нього курсор миші, і псевдо-клас :after, який додає контент після вибраного елемента. Фон встановлюється частково прозорим, а для браузерів, які не підтримують формат кольору RGBA, встановлюємо сірий колір фону.

Закруглені кути створюються за допомогою атрибуту border-radius . Колір тексту робимо білим. На завершення, ми позиціонуємо блок підказки і додаємо відступ.

Крім визначення стилів і позиціонування задаємо властивість content :

    content: attr(data-title);

Для завершення потрібно додати стрілочку внизу підказки. Використовуємо псевдо-клас :before та стилі для рамки:


.tooltip:hover:before{
    border: solid;
    border-color: #333 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

Для створення стрілки ми використовували трюк з рамкою: встановлюємо колір рамки зліва і справа прозорим і керуємо шириною рамки. Також стрілка позиціонується під підказкою.

Приклад даного посилання в роботі можна глянути на цій сторінці demo

схоже за тегами

1 коментар

  1. Дуже наглядно і просто, і річ, звісно, потрібна. Особливо вразив процес створення стрілки!

Залишити коментар:

Яндекс цитирования UA TOP Bloggers