Стилизация Title

замена тайтлов на стилизованный вариант

by Denis Tverdokhlebov

HTML

<h1>Пример всплывающих подсказок, сделанных на CSS!</h1>
<p>Наведите курсор мыши на надписи чтобы увидеть:
	<a class="tooltip" href="#">классическую подсказку<span class="classic">Это просто пример того, как сделать подсказки с использованием CSS!</span></a>,
	<a class="tooltip" href="#">критическое сообщение<span class="custom critical"><img src="data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='33' height='33' viewBox='0 0 33 33'><path fill='%23CA9C3C' d='M14.588 7.034c-.887.01-1.141.112-2.061.209-3.178.336-6.384 2.727-7.463 5.883s-.09 5.066 3.825 5.066c1.41-.831 1.435-8.614 5.402-10.269.557-.233 1.118-.429 1.672-.586.267-.076.69-.24.69-.24s-.971-.076-2.065-.063z'/><circle fill='%23FFCE55' cx='17.003' cy='17.073' r='9.976'/><path fill='%23333' d='M17.032 7.074c-.87-.016-1.822-.07-3.347.085 4.065.167 7.811 2.414 9.322 7.124.464 1.551 2.469 3.463 3.924 3.581.027-.293.04-.59.04-.891 0-5.411-4.486-9.8-9.939-9.899z'/></svg>" alt="Ошибка" height="48" width="48" /><em>Критическое сообщение</em>Это просто пример того, как сделать подсказки с использованием CSS!</span></a>,
	<a class="tooltip" href="#">помощь<span class="custom help"><img src="data:image/svg+xml;charset=utf8,<svg xmlns='http://www.w3.org/2000/svg' width='33' height='33' viewBox='0 0 33 33'><path fill='%23CA9C3C' d='M14.588 7.034c-.887.01-1.141.112-2.061.209-3.178.336-6.384 2.727-7.463 5.883s-.09 5.066 3.825 5.066c1.41-.831 1.435-8.614 5.402-10.269.557-.233 1.118-.429 1.672-.586.267-.076.69-.24.69-.24s-.971-.076-2.065-.063z'/><circle fill='%23FFCE55' cx='17.003' cy='17.073' r='9.976'/><path fill='%23333' d='M17.032 7.074c-.87-.016-1.822-.07-3.347.085 4.065.167 7.811 2.414 9.322 7.124.464 1.551 2.469 3.463 3.924 3.581.027-.293.04-.59.04-.891 0-5.411-4.486-9.8-9.939-9.899z'/></svg>" alt="Помощь" height="48" width="48" /><em>Помощь</em>Это просто пример того, как сделать подсказки с использованием CSS!</span></a>,
	<a class="tooltip" href="#">информация<span class="custom...

CSS

.tooltip {
	border-bottom: 1px dotted #000000; color: #000000; outline: none;
	cursor: help; text-decoration: none;
	position: relative;
}
.tooltip span {
	margin-left: -999em;
	position: absolute;
}
.tooltip:hover span {
	border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	font-family: Calibri, Tahoma, Geneva, sans-serif;
	position: absolute; left: 1em; top: 2em; z-index: 99;
	margin-left: 0; width: 250px;
}
.tooltip:hover img {
	border: 0; margin: -10px 0 0 -55px;
	float: left; position: absolute;
}
.tooltip:hover em {
	font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold;
	display: block; padding: 0.2em 0 0.6em 0;
}
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic {background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334;	}
.help { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.info { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }