Хаки и Скрипты Next Generation CMS : Tooltips : Добавляем к ссылкам и картинкам всплывающие подсказки Tooltips

irbees2008 Опубликовано - 13 - января Tooltips

Адаптировал: irbees2008
Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки

Всем привет.
Сегодня поработаем с всплывающими подсказками (Tooltips).
Всплывающая подсказка (Tooltips) применяються как для ссылок, так и для изображений.В неоформленном виде всплывающая подсказка выглядит вот так:
Наведи на меня

Как видите всплывающая подсказка (Tooltips) выводится с помощью атрибута title.
Вот самый простой код ссылки с всплывающей подсказкой без оформления:

Код:

<a href="https://ngcmshak.ru/" title="https://ngcmshak.ru/">[b]Наведи на меня[/b]</a>

Ну а теперь попробуем оформить и разобраться как это работает.
Оформлять будем с помощью CSS. Ну вариантов много,мы разберем только три варианта подсказки на CSS.
К сожалению, нет CSS-«рецепта» в отношении оформления title, поэтому придется добавлять дополнительные атрибуты, прописывать для них оформление и добавлять их в код ссылки/изображения, для которого мы хотим сделать красивую всплывающую подсказку CSS.

В первом варианте сделаем подсказку поверх изображения в самом низу.Для этого мы будем использовать два атрибута: image, а для того, чтобы всплывающая подсказка работала, — ::after и data-text для вывода текста всплывающей подсказки.
1.Добавляем стиль

Код:

.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; /* Параметры рамки */ }

2.Сам блок с нашей картинкой и подсказкой

Код:

<div class="image" data-text="Текст подсказки"><img src="путь к изображению" alt=""></div>

Для ссылок такое оформление не подойдет,для них будем использовать другие варианты.
Первый вариант будет выводить всплывающую подсказку над ссылкой.
1.Стили подсказки и ссылки

Код:

.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;}

2.А для ссылки с подсказкой используем код:

Код:

<a href="https://ngcmshak.ru/" title="Текст подсказки." class="podskazka">Ссылка</a>

Результат:
Наведи курсор

И последний вариант — вывод всплывающей подсказки под ссылкой. Вариант похож на предыдущий, только вывод всплывающей подсказки тут снизу.

1.Стили подсказки и ссылки

Код:

.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;}

2.Сама ссылка

Код:

<span class="tooltip">Ссылка<span class="classic">Текст всплывающей подсказки</span></span>

Результат:
Наведи

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

Можешь почитать и вот эту статейку "Тег col "

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.