Css Tooltip Thing

by moob

HTML

<h2>Tooltip</h2>
<div data-title="Hi im a tooltip">
Use a data-attr rather than the title so it doesn't interfere with the browsers's default tooltip
</div>
<div data-title="This is my custom tooltip">
Slap the tooltip in the center
</div>

CSS

[data-title] {
    position:relative;
    display:inline-block;
}
[data-title]:hover:after {
	border: 1px solid #fc0;
	padding: 3px 6px;
	background: #fffea1;
	content: attr(data-title);
	position: absolute;
	left: 50%;
	bottom: 100%;
    transform: translateX(-50%);
    white-space:nowrap;
}