Як зробити спливаючу підказку в css

5/52 ratings

Доброго часу доби, шановний користувач, сьогодні я хотів би поговорити про те як можна створити спливаючі підказки в тексті з використанням CSS, ну і створити кілька прикладів.

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

Підказку Ви можете застосовувати як для посилань, так і для будь-яких зображень.

У звичайному вигляді без оформлення підказка має приблизно такий вигляд як на фото нижче:

І виводиться вона стандартним системним методом за допомогою атрибута title, без оформлення код посилання з спливаючій підказкою виглядає так:

<a title="Спливаюча підказка" href="http://site.ru/">Посилання</a>

1	<a title="Спливаюча підказка" href="http://site.ru/">Посилання</a>

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

Так як, немає можливості в CSS простого оформлення title, тому ми будемо додавати різні атрибути, писати для них оформлення і відповідно додавати їх в код нашого лінку або зображення, для якого ми робимо гарну підказку.

Варіант підказки перший, в ньому ми будемо додавати підказку на фотографію в самому низу при наведенні миші.

Для виконання даної дії ми будемо використовувати два атрибути: image, І для того щоб наша підказка працювала after і data-text для виводу тексту підказки.

Приклад стилів CSS для даного варіанту підказки:

.image {
    display: inline-block;
    position: relative;
   }
   .image:hover::after {
    content: attr(data-text); /* Виводимо текст підказки*/
    position: absolute;
    left: 0; right: 0; bottom: 0px; /* Положення підказки */
    z-index: 1; /* Відображаємо підказку поверх інших елементів */
    background: rgba(0,255,102,0.6); /* Колір (RGB) і ступінь його прозорості */
    color: #fff; /* Колір тексту */
    text-align: center; /* Вирівнюємо текст по центру */
    font-family: Arial, sans-serif; /* Гарнітура шрифту */
    font-size: 11px; /* Розмір тексту підказки */
    padding: 5px 10px; /* Поля */
    border: 1px solid #333; /* Параметри рамки */
   }

.image {

display: inline-block;

position: relative;

}

.image:hover::after {

content: attr(data-text); /* Виводимо текст підказки*/

position: absolute;

left: 0; right: 0; bottom: 0px; /* Положення підказки */

z-index: 1; /* Відображаємо підказку поверх інших елементів */

background: rgba(0,255,102,0.6); /* Колір (RGB) і ступінь його прозорості */

color: #fff; /* Колір тексту */

text-align: center; /* Вирівнюємо текст по центру */

font-family: Arial, sans-serif; /* Гарнітура шрифту */

font-size: 11px; /* Розмір тексту підказки */

padding: 5px 10px; /* Поля */

border: 1px solid #333; /* Параметри рамки */

}

Ну і сам HTML код виглядає так:

<div class="image" data-text="Текст підказки"><img src="шлях до зображення" alt="" /></div>

1	<div class="image" data-text="Текст підказки"><img src="шлях до зображення" alt="" /></div>

А ось приблизно такий результат у нас вийде:

Але для посилань такий варіант підказки не підійде звичайно ж, значить будемо використовувати трохи інші методи виведення нашої підказки. І в першому методі ми виведемо підказку саме над нашим посиланням.

Приклад коду CSS Нижче:

.podskazka{
    display: inline;
    position: relative;
}
.podskazka:hover:after{
    background: #333;
    background: rgba(204,102,0,.8);
    border-radius: 5px;
    bottom: 26px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    width: auto;
}
.podskazka:hover:before{ /* Додаємо стрілочку внизу блоку підказки */
    border: solid;
    border-color: #cc6600 transparent;
    border-width: 6px 6px 0 6px;
    bottom: 20px;
    content: "";
    left: 50%;
    position: absolute;
    z-index: 99;
}

.podskazka{

display: inline;

position: relative;

}

.podskazka:hover:after{

background: #333;

background: rgba(204,102,0,.8);

border-radius: 5px;

bottom: 26px;

color: #fff;

content: attr(title);

left: 20%;

padding: 5px 15px;

position: absolute;

z-index: 98;

width: auto;

}

.podskazka:hover:before{ /* Додаємо стрілочку внизу блоку підказки */

border: solid;

border-color: #cc6600 transparent;

border-width: 6px 6px 0 6px;

bottom: 20px;

content: "";

left: 50%;

position: absolute;

z-index: 99;

}

А для нашого лінку з підказкою робимо такий код:

<a class="podskazka" title="Текст нашої підказки." href="https://web-ukraine.com/">Посилання</a>

1	<a class="podskazka" title="Текст нашої підказки." href="https://web-ukraine.com/">Посилання</a>

Ну і результат у нас вийде такий:

Наведи курсор сюди

Ну і останній третій варіант - Виводити нашу підказку будемо під посиланням, в принципі він схожий на попередній але трохи інший дизайн і вивід під посиланням.

Приклад CSS коду:

.tooltip { 
  position: relative;     /* Робимо елемент батьківським для спливаючих підказок */
  cursor: help;
}
.tooltip span {
  position: absolute;     /* Виводимо елемент з потоку */
  margin-left: -30000px;  /* І ховаємо далеко за краєм екрана */
  background-color: rgba(0,0,153,.8); /* Фон спливаючого блоку*/
  color: #fafafa;             /* Колір тексту */
  padding:10px;                 /* Відступи */               
  -webkit-border-radius: 5px; /* Заокруглюємо куточки */
  -moz-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}
.tooltip:hover span {     /* При наведенні */
  margin-left: 0;         /* Повертаємо з далекого заекранного краю блок на місце */
  width: 250px;           /* Задаємо ширину */
  z-index: 1000;          /* Розміщуємо на самий верх */
                          /* Позиціонуємо відносно батьківського блоку */
  top:30px;               /* Відступ зверху */  
  left:20px;              /* Лівий відступ */          
}
.tooltip span:after{
  content: '';            /* Додали контент */ 
  width:0;                /* Сховали його, перетворивши в 0 */
  height:0;
  border-bottom: 10px solid #000099;  /* Нижнім бордером задаємо колір і висоту трикутника */
  border-right: 30px solid transparent; /* Правим - ширину трикутника вправо */
  position: absolute;     /* Позиціонуємо відносно батьківського блоку */
  top:-10px;
  left:10px;
}

.tooltip {

position: relative; /* Робимо елемент батьківським для спливаючих підказок */

cursor: help;

}

.tooltip span {

position: absolute; /* Виводимо елемент з потоку */

margin-left: -30000px; /* І ховаємо далеко за краєм екрана */

background-color: rgba(0,0,153,.8); /* Фон спливаючого блоку*/

color: #fafafa; /* Колір тексту */

padding:10px; /* Відступи */

-webkit-border-radius: 5px; /* Заокруглюємо куточки */

-moz-border-radius: 5px;

-khtml-border-radius: 5px;

border-radius: 5px;

}

.tooltip:hover span { /* При наведенні */

margin-left: 0; /* Повертаємо з далекого заекранного краю блок на місце */

width: 250px; /* Задаємо ширину */

z-index: 1000; /* Розміщуємо на самий верх */

/* Позиціонуємо відносно батьківського блоку */

top:30px; /* Відступ зверху */

left:20px; /* Лівий відступ */

}

.tooltip span:after{

content: ''; /* Додали контент */

width:0; /* Сховали його, перетворивши в 0 */

height:0;

border-bottom: 10px solid #000099; /* Нижнім бордером задаємо колір і висоту трикутника */

border-right: 30px solid transparent; /* Правим - ширину трикутника вправо */

position: absolute; /* Позиціонуємо відносно батьківського блоку */

top:-10px;

left:10px;

}

Ну і відповідно html-код для посилання:

<span class="tooltip">Посилання<span class="classic">Текст спливаючої підказки</span></span>

1	<span class="tooltip">Посилання<span class="classic">Текст спливаючої підказки</span></span>

І результат у Вас повинен буде вийде як на прикладі нижче:

Наведи курсор сюдиТекст спливаючої підказки

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