JSFiddle - React, Tailwind, and code Playground

by Kerrick

HTML

<a data-tooltip="This is the data-tooltip text." href="http://example.com/">This link has a tooltip.</a>

CSS

*[data-tooltip] {
    position: relative;
    cursor: help;
}
*[data-tooltip]:hover:after {
    content: attr(data-tooltip);
    position: absolute;
    left: 0px;
    top: 24px;
    background-color: black;
    background-color: rgba(0,0,0,0.8);
    color: white;
    border-radius: 3px;
    padding: 0.5em;
    box-shadow: 0px 2px 5px black;
}
*[data-tooltip]:hover:before {
	top: 14px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

*[data-tooltip]:hover:before {
	border-color: rgba(0, 0, 0, 0);
	border-bottom-color: #000;
    border-bottom-color: rgba(0,0,0,0.8);
	border-width: 5px;
	left: 10px;
	margin-left: -5px;
}