Пошаговое руководство по созданию всплывающих подсказок в html и CSS

vsplivaiuchie podskazkiПриветствую вас! Всплывающие подсказки при наведении – это отличный способ показать пользователю дополнительную информацию, просто наведя на изображение или текст. Их можно использовать, например, для более подробных описаний ссылок или любой другой полезной информации, которая улучшит работу вашего сайта без вмешательства в дизайн. В данной статье вы получите пошаговое руководство по созданию всплывающих подсказок в html и CSS.

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

1 html всплывающая подсказка

Начнем с создания простой разметки для ссылки. Нам нужно дать название, то есть содержимое всплывающей подсказки, и присвоить ему класс:

<a href="#" title="Скачайте свежий материал">Скачать</a>

Итог:

Скачать

Давайте проделаем этот же номер, но только с картинкой:

<a href="//kopslav.ru/interesnye-plaginy-na-sajt/bitva-titanov-yoast-seo-protiv-all-in-one-seo-pack.html/"><img class="aligncenter wp-image-3967" src="//kopslav.ru/wp-content/uploads/2017/11/Yoast-SEO-protiv-All-in-One-SEO-Pack.png" alt="Yoast SEO protiv All-in-One SEO Pack" width="300" height="144" title="Перейти на статью:Битва титанов! Yoast SEO против All-in-One SEO Pack"/></a>

Итог: Yoast SEO protiv All-in-One SEO Pack

Все легко и просто! Но здесь есть свои погрешности. То есть параметры отображения, такие как цвет, размер, шрифт, задаются исходя из параметров определенного браузера, и вы не сможете на это повлиять.

2 CSS всплывающая подсказка

Способ 1

Шаг 1. Мы добавим атрибут всплывающей подсказки следующим образом:

<button tooltip = "простая подсказка здесь"> нажмите Meня!! Кнопка </>

Нам нужны :: after и :: before перед псевдо элементами. Это будет простой прямоугольник с содержимым всплывающей подсказки. Мы создаем простой прямоугольник с CSS, добавляя границу вокруг пустого элемента, который мы создаем с использованием свойства content. Псевдо элемент :: before используется для отображения содержимого всплывающей подсказки.

Мы добавляем его с содержимым и извлекаем значение атрибута всплывающей подсказки. Значение для содержимого может быть строкой, значением атрибута из элемента, подобного нашему примеру, или даже изображением с url (путь / image.png).

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

button{
  margin:auto;
  background: #3498db;
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
}
[tooltip]{
  margin:20px;
  position:relative;
}
[tooltip]::before {
    content: "";
    position: absolute;
    top:-6px;
    left:50%;
    transform: translateX(-50%);
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: rgba(0,0,0,0.7) transparent transparent     transparent;
    z-index: 100;
}
[tooltip]::after {
    content: attr(tooltip);
    position: absolute;
    left:50%;
    top:-6px;
    transform: translateX(-50%)   translateY(-100%);
    background: rgba(0,0,0,0.7);
    text-align: center;
    color: #fff;
    padding:4px 2px;
    font-size: 12px;
    min-width: 80px;
    border-radius: 5px;
    pointer-events: none;
}

Шаг 2. Давайте поиграем с псевдонимами :: before и :: after, чтобы создать позицию всплывающей подсказки. Наша кнопка HTML будет выглядеть так:

<button tooltip = "подсказка здесь" tooltip-position = "left"> нажмите здесь!! button</>

Позиция всплывающей подсказки может быть: правая, левая, верхняя или нижняя.

[tooltip-position='left']::before{
  left:0%;
  top:50%;
  margin-left:-12px;
  transform:translatey(-50%) rotate(-90deg)
}
[tooltip-position='top']::before{
  left:50%;
}
[tooltip-position='bottom']::before{
  top:100%;
  margin-top:8px;
  transform: translateX(-50%) translatey(-100%) rotate(-180deg)
}
[tooltip-position='right']::before{
  left:100%;
  top:50%;
  margin-left:1px;
  transform:translatey(-50%) rotate(90deg)
}
[tooltip-position='left']::after{
  left:0%;
  top:50%;
  margin-left:-8px;
  transform: translateX(-100%)   translateY(-50%);
}
[tooltip-position='top']::after{
  left:50%;
}
[tooltip-position='bottom']::after{
  top:100%;
  margin-top:8px;
  transform: translateX(-50%) translateY(0%);
}
[tooltip-position='right']::after{
  left:100%;
  top:50%;
  margin-left:8px;
  transform: translateX(0%)   translateY(-50%);
}

Способ 2

Здесь мы создадим всплывающую подсказку и зададим для нее визуальное оформление, такое какое нам нужно. Для этого создаем отдельный блок, после элемента, для которого будет сделана эта подсказка. В нем вы разместите необходимый текст и css стилями зададите нужные вам параметры визуализации:

Код HTML:

<div class="img-text">
<a href="//kopslav.ru/interesnye-plaginy-na-sajt/flesh-igry-na-sajt.html/"><img class="aligncenter wp-image-4086" src="//kopslav.ru/wp-content/uploads/2017/11/flech-igri-na-sait.png" alt="flech igri na sait" width="300" height="144" /></a>
<div class="podskazka">Перейти на статью:Флеш игры на сайт?</div>
</div>

Стили CSS

.img-text{
	position:relative;
	display:block;
	width:300px; /*задаём ширину блока*/
	margin:auto;
}
.podskazka{
	margin:0px!important;
	opacity: 0;
	position: absolute;
	width: 100%;
	left: 0; /*отступ слева*/
	top: 105px; /*отступ сверху*/
	padding:8px 0px;
	font-weight:bold;
	background: #444; /*задаём цвет фона*/
	color: #fff!important;
	text-align: center; /*выравнивание текста*/
	font-size: 14px; /*размер шрифта*/
	transition: all 0.6s;
	}
.img-text:hover .podskazka{
	opacity: 0.8; /*задаём уровень прозрачности*/
}

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

С уважением Вячеслав Коптяков!

Понравился материал? Поделитесь с друзьями!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

:good:  :bye:  :negative:  :scratch:  :wacko:  :yahoo:  B-)  :heart:  :-)  :rose:  :whistle:  :yes:  :cry:  :mail:  :-( 
:unsure:  ;-) 
 
Мой магазин
Shop
Подарок автора
dvd200
Отличный выбор
Дешевый хостинг. Выбор профессионалов!