Pure CSS Tooltips

HTML

<body>
  <div class="tooltips">
    <p><span data-tooltip="Lorem Ipsum Dolor Sit Amet" class="top">Top</span></p>
    <p><span data-tooltip="Lorem Ipsum Dolor Sit Amet" class="left">Left</span></p>
    <p><span data-tooltip="Lorem Ipsum Dolor Sit Amet" class="right">Right</span></p>
    <p><span data-tooltip="Lorem Ipsum Dolor Sit Amet" class="bottom">Bottom</span></p>
  </div>
</body>

CSS

body {
	background-color: #2E3537;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Arial', sans-serif;
}

.tooltips p {
	text-align: center;
	margin-bottom: 20px;
}

.tooltips span {
	font-size: 24px;
	color: white;
}

span[data-tooltip] {
	position: relative;
	cursor: default;
}

span[data-tooltip].top:before, span[data-tooltip].top:after {
	transform: translateY(10px);
}

span[data-tooltip].top:hover:before, span[data-tooltip].top:hover:after {
	transform: translateY(0px);
}

span[data-tooltip].left:before, span[data-tooltip].left:after {
	transform: translateX(0px);
}

span[data-tooltip].left:hover:before, span[data-tooltip].left:hover:after {
	transform: translateX(-10px);
}

span[data-tooltip].right:before, span[data-tooltip].right:after {
	transform: translateX(0px);
}

span[data-tooltip].right:hover:before, span[data-tooltip].right:hover:after {
	transform: translateX(10px);
}

span[data-tooltip].bottom:before, span[data-tooltip].bottom:after {
	transform: translateY(-10px);
}

span[data-tooltip].bottom:hover:before, span[data-tooltip].bottom:hover:after {
	transform: translateY(0px);
}

span[data-tooltip]:after, span[data-tooltip]:before {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
	z-index: 999;
	transition: transform 200ms ease, opacity 200ms;
}

span[data-tooltip]:before {
	content: attr(data-tooltip);
	background: black;
	color: white;
	font-size: 10px;
	padding: 10px;
	border-radius: 5px;
	width: 130px;
	max-width: 130px;
}

span[data-tooltip]:after {
	content: '';
	width: 0;
	height: 0;
	border: 6px solid transparent;
}

span[data-tooltip]:hover:before, span[data-tooltip]:hover:after {
	visibility: visible;
	opacity: 1;
	transform: translateY(0px);
}

span[data-tooltip].top:before {
	bottom: 100%;
	left: -60px;
	margin-bottom: 10px;
}

span[data-tooltip].top:after {
	border-top-color: black;
	border-bottom: none;
	bottom: 100%;
	left: calc(50% - 6px);
	margin-bottom: 4px;
}

span[data-tooltip].left:before {
	top: -18%;
	right: 100%;
	margin-right: 10px;
}

span[data-tooltip].left:after {
	border-left-color: black;
	border-right: none;
	top: calc(50% - 3px);
	right: 100%;
	margin-top: -6px;
	margin-right: 4px;
}

span[data-tooltip].right:before {
	top: -10%;
	left: 100%;
	margin-left: 10px;
}

span[data-tooltip].right:after {
	border-right-color: black;
	border-left: none;
	top: calc(50% - 6px);
	left: calc(100% + 4px);
}

span[data-tooltip].bottom:before {
	top: 100%;
	left: -50%;
	margin-top: 10px;
}

span[data-tooltip].bottom:after {
	border-bottom-color: black;
	border-top: none;
	top: 100%;
	left: calc(50% - 6px);
	margin-top: 4px;
}