Pure CSS tooltip

HTML

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

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-family: sans-serif;
		font-size: 12px;
		line-height: 1;
		
		background: #222;
		color: #fff;
	}
}