JSFiddle - React, Tailwind, and code Playground

by Clint Brown

HTML

<div data-tooltip="This is my tooltip">
    <label>Name</label>
    <input type="text" />
</div>

CSS

div:hover:before {
    content: attr(data-tooltip);
    position: absolute;
    padding: 5px 10px;
    margin: -3px 0 0 180px;
    background: orange;
    color: white;
    border-radius: 3px;
}

div:hover:after {
    content: '';
    position: absolute;
    margin: 6px 0 0 3px;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-right: 10px solid orange;
	border-bottom: 5px solid transparent;
}

input[type="text"] {
    width: 125px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}