/ Новости и уроки / Всплывающая подсказка на css

Всплывающая подсказка на css

89
Всплывающая подсказка на css

Всем привет. В этой статье мы сделаем красивую и анимированную подсказку на css. При наведении у нас будет происходить плавное появление подсказки. В ней будет содержаться текст.

Разметка HTML

Давайте начнем с обычной разметки html. Добавляем кнопки. В каждой кнопки будет храниться атрибут data-tooltip, где и будет храниться наш текст.


<div class="tooltips">
<h1>Всплывающая подсказка на css</h1>

<div class="btns">
	<button data-tooltip="Подсказка" class="tooltip right">Справо</button>
	<button data-tooltip="Подсказка" class="tooltip left">Слево</button>
	<button data-tooltip="Подсказка" class="tooltip top">Верх</button>
	<button data-tooltip="Подсказка" class="tooltip bottom">Низ</button>
</div>
</div>

Css

Теперь приступаем к стилизации. В этом коде мы добавим стили к кнопкам, и при наведении у нас плавно будет появляться блок, который и является подсказкой. У нас всего получиться 4 блока с подсказками. У каждого будет свои стили.


*{margin: 0px; padding: 0px}


body { 
		font-family: 'Roboto', sans-serif;
	}
.tooltips{
			width: auto;
			height: 30px;
			margin: 50px auto 0px auto;
			display: table;
		}
		.tooltip[data-tooltip]{
			position: relative;
			cursor: pointer;
                        border-radius: 10px;
                        border: solid 1px #ececec;
                       background: none;
                      padding: 11px 16px 11px 16px;
		}
		.tooltip[data-tooltip]:before,.tooltip[data-tooltip]:after{
			opacity: 0;
			visibility: hidden;
			pointer-events: none;

		}
.right[data-tooltip]:before{
			content: attr(data-tooltip);
			position: absolute;
			background-color: red;
			width: 100px;
			height: 30px;
			line-height: 30px;
			color: #fff;
			font-size: 12px;
			left: 110%;
			top: 2px;
			z-index: 9999999999999;
			box-shadow: 2px 0px 5px rgba(0, 0, 0, .5);
		}
.right[data-tooltip]:after{
		    content: "";
		    width: 0;
		    border-color: red;
		    position: absolute;
		    right: -10px;
		    border-bottom: 5px solid transparent;
		    border-right: 10px solid red;
		    border-top: 5px solid transparent;
		    z-index: 9999;
		    top: 12px;
		}
.left[data-tooltip]:before{
			content: attr(data-tooltip);
			position: absolute;
			background-color: red;
			width: 100px;
			height: 30px;
			line-height: 30px;
			color: #fff;
			font-size: 12px;
			right: 110%;
			top: 2px;
			z-index: 9999999999999;
			box-shadow: -2px 0px 5px rgba(0, 0, 0, .5);
		}
.left[data-tooltip]:after{
		    content: "";
		    width: 0;
		    border-color: red;
		    position: absolute;
		    left: -9px;
		    border-bottom: 5px solid transparent;
		    border-left: 10px solid red;
		    border-top: 5px solid transparent;
		    z-index: 9999;
		    top: 12px;
		}
		.top[data-tooltip]:before{
			content: attr(data-tooltip);
			position: absolute;
			background-color: red;
			width: 100px;
			height: 30px;
			line-height: 30px;
			color: #fff;
			font-size: 12px;
			right: auto;
		    left: -42%;
		    top: -40px;
			z-index: 9999999999999;
			box-shadow: 0px -2px 5px rgba(0, 0, 0, .5);
		}
		.top[data-tooltip]:after{
		    content: "";
		    width: 0;
		    border-color: red;
		    position: absolute;
		    left: 21px;
		    border-right: 5px solid transparent;
		    border-top: 10px solid red;
		    border-left: 5px solid transparent;
		    z-index: 9999;
		    top: -12px;
		}
		.bottom[data-tooltip]:before{
			content: attr(data-tooltip);
			position: absolute;
			background-color: red;
			width: 100px;
			height: 30px;
			line-height: 30px;
			color: #fff;
			font-size: 12px;
			right: auto;
		    right: -50%;
		    top: 50px;
			z-index: 9999999999999;
			box-shadow: 0px 2px 5px rgba(0, 0, 0, .5);
		}
		.bottom[data-tooltip]:after{
		    content: "";
		    width: 0;
		    border-color: red;
		    position: absolute;
		    left: 20px;
		    border-right: 5px solid transparent;
		    border-bottom: 10px solid red;
		    border-left: 5px solid transparent;
		    z-index: 9999;
		    top: 42px;
		}
		.tooltip[data-tooltip]:hover:before,.tooltip[data-tooltip]:hover:after{
			visibility: visible;
			opacity: 1;
			transition: all .5s ease-in-out;

		}
h1{
			color: red;
			padding-bottom: 5%;
		}
.btns {
			text-align: center;
		}

На этом все. У нас получилась красивая и анимированная подсказка выполненная на чистом css.