Как сделать всплывающую подсказку в css

4.5/58 оценки

Доброго времени суток уважаемый пользователь, сегодня я хотел бы поговорить о том как можно создать всплывающие подсказки в тексте с использованием 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>

И результат у Вас должен будет получится как на примере ниже:

Наведи курсор сюдаТекст всплывающей подсказки

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