Tooltips & toggletips > Tooltips

Icon button with tooltip

Example code

							<button type="button">
	<span aria-hidden="true" role="presentation">+</span>
	<span class="tooltip">New item</span>
</button>

<button type="button">
	<span aria-hidden="true" role="presentation">←</span>
	<span class="tooltip">Move left</span>
</button>

<button type="button">
	<span aria-hidden="true" role="presentation">→</span>
	<span class="tooltip">Move right</span>
</button>

<style>
.tooltip { 
	position: absolute;
	top: -100vh;
	background: rgb(0, 0, 1);
	color: white;
	padding: .5em;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	z-index: 1;
}
button {
	position: relative;
	font-size: 1em;
	padding: .25em .5em;
	border: 1px solid;
	margin: 1em auto; /* for better preview */
	display: block; /* for better preview */
}
button:hover .tooltip,
button:focus .tooltip { 
	top: 100%;
}
</style>