Хаки и Скрипты Next Generation CMS

Добавляем к ссылкам и картинкам всплывающие подсказки Tooltips

irbees2008 irbees2008 Опубликовано - 13 - января Tooltips
2981 - 0
  • Адаптировал: 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, но это далеко не все варианты, поэтому можете искать и использовать на своем сайте то, что больше всего Вам подойдет.

Можешь почитать и вот эту статейку "Вставляем правильно дополнительное поле xfields"

Опрос

Ваше мнение

На каком движке ваш сайт?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4375 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 661
  • Онлайн всего: [9]
  • Гости: [8]
  • Поисковики: [1] Google
  • Были сегодня : [3] Яндекс, Google, Яндекс
  • SQL запросов: 30
  • Генерация страницы: 0.281сек
  • Потребление памяти: 5.306 Mb 
  •   Яндекс.Метрика