button Please hover
	span This is tooltip.
View Compiled
body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

button {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 16em;
	height: 3.2em;
	padding: 0 1em;
	border: none;
	border-radius: 3px;
	background-color: #199bfc;
	color: #fff;
	font-family: 'Press Start 2P', cursive;
	font-size: 2.4vw;
	cursor: pointer;
	outline: none;
	appearance: none;
	&:hover {
		span {
			opacity: 1;
			transform: translate(-50%, 0);
		}
	}
	span {
		position: absolute;
		left: 50%;
		bottom: 100%;
		opacity: 0;
		margin-bottom: 1em;
		padding: 1em;
		background-color: #000;
		font-size: .6em;
		line-height: 1.6;
		text-align: left;
		white-space: nowrap;
		transform: translate(-50%, 1em);
		transition: all .15s ease-in-out;
		&::before {
			content: '';
			position: absolute;
			top: 100%;
			left: 50%;
			width: 0;
			height: 0;
			border: .5em solid transparent;
			border-top-color: #000;
			transform: translate(-50%, 0);
		}
	}
}
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Press+Start+2P

External JavaScript

This Pen doesn't use any external JavaScript resources.