дек
11
2016

CSS Tooltip | Всплывающие подсказки на CSS

Более "продвинутые" подсказки с использованием jQuery можно посмотреть здесь: Изучаем jQuery. Простые стилизованные подсказки

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum ipsum sunt magni illo dignissimos magnam delectus itaque earum sit dolorum hic, error ex? Sunt, dicta. Perspiciatis sunt provident voluptates blanditiis distinctio a error maiores atque voluptas, corrupti deserunt sed, iste, fuga totam rem odio. Maiores provident nobis tempore odit, consequatur.

index.html
<p class="tooltip-wrapper">
	Lorem ipsum <span class="tooltip" data-title="My tooltip text goes here">dolor</span>
	sit amet, consectetur ...
</p>
main.css
.tooltip {
	color: #337ab7;
	border-bottom: 1px dashed #337ab7;
	position: relative;
	display: inline-block;
	cursor: pointer;
	font-weight: bold;
}

.tooltip::before,
.tooltip::after {
	display: block;
	position: absolute;
	margin-bottom: 10px;
	left: 50%;
	visibility: hidden;
	opacity: 0;
	transition: all .25s ease-in-out;
}

.tooltip::before {
	content: attr(data-title); 
	bottom: 30px;
	margin-left: -100px;
	width: 200px;
	padding: 10px;
	background: rgba(0,0,0,.85);
	text-align: center;
	font-size: .9em;
	font-weight: normal;
	color: #fff;
	border-radius: 5px;
	line-height: 16px;
}

.tooltip:hover::before,
.tooltip:hover::after {
	opacity: 1;
	visibility: visible;
	margin-bottom: 0;
}

.tooltip::after {
	content: '';
	border-top: 10px solid rgba(0,0,0,.85);
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	margin-left: -10px;
	bottom: 20px
}

Материалы по теме:
Всплывающие подсказки на CSS
Sorax. Уроки веб-разработки