Purce CSS tooltip - demo: https://jsfiddle.net/yp1tL5ft/

tooltip.html

<span data-tooltip="Look ma, I am a tooltip!">Hover over me!</span>

tooltip.scss

[data-tooltip] {
	position: relative;
	border-bottom: 1px dotted #666;
	
	&:hover::before {
		content: '';
		pointer-events: none;
		
		display: block;
		box-sizing: border-box;
		position: absolute;
		top: 100%;
		left: 8px;
		width: 4px;
		height: 4px;
		
		border: 4px solid transparent;
		border-bottom-color: #222;
	}
	
	&:hover::after {
		content: attr(data-tooltip);
		pointer-events: none;
		
		display: block;
		box-sizing: border-box;
		position: absolute;
		top: calc(100% + 8px);
		left: 0;
		width: 100%;
		
		padding: 8px;
		font-size: 12px;
		line-height: 1;
		
		background: #222;
		color: #fff;
	}
}