*[data-tooltip] {
	position: relative;
}

	*[data-tooltip]:hover:after, *[data-tooltip]:hover:before {
		opacity: 1;
		visibility: visible;
	}

	*[data-tooltip]:after, *[data-tooltip]:before {
		position: absolute;
		top: auto;
		bottom: 100%;
		left: 50%;
		opacity: 0;
		visibility: hidden;
		-webkit-transition: 0.15s ease-in;
		transition: 0.15s ease-in;
		z-index: 5;
	}

	*[data-tooltip]:after {
		content: attr(data-tooltip);
		background: #666;
		padding: 5px 15px;
		text-align: center;
		color: #f0f0f0;
		font-size: 12px;
		line-height: 16px;
		white-space: nowrap;
		border-radius: 4px;
		-webkit-transform: translate(-50%, -8px);
		transform: translate(-50%, -8px);
	}

	*[data-tooltip]:before {
		content: '';
		top: auto;
		bottom: 100%;
		border: 4px solid transparent;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
		border-top-color: #111;
	}

	*[data-tooltip][data-position="bottom"]:after {
		top: 100%;
		bottom: auto;
		-webkit-transform: translate(-50%, 8px);
		transform: translate(-50%, 8px);
	}

	*[data-tooltip][data-position="bottom"]:before {
		top: 100%;
		bottom: auto;
		border-color: transparent;
		border-bottom-color: #333;
	}

	*[data-tooltip][data-position="left"]:after {
		left: 0;
		bottom: auto;
		top: 50%;
		margin-left: -8px;
		-webkit-transform: translate(-100%, -50%);
		transform: translate(-100%, -50%);
	}

	*[data-tooltip][data-position="left"]:before {
		left: 0;
		bottom: auto;
		top: 50%;
		-webkit-transform: translate(-100%, -50%);
		transform: translate(-100%, -50%);
		border-color: transparent;
		border-left-color: #454545;
	}

	*[data-tooltip][data-position="right"]:after {
		left: 100%;
		bottom: auto;
		top: 50%;
		-webkit-transform: translate(8px, -50%);
		transform: translate(8px, -50%);
	}

	*[data-tooltip][data-position="right"]:before {
		left: 100%;
		top: 50%;
		bottom: auto;
		-webkit-transform: translate(0, -50%);
		transform: translate(0, -50%);
		border-color: transparent;
		border-right-color: #454545;
	}



/*<h1>CSS ToolTip</h1>
<button class="btn" data-position="left"  data-tooltip="Tooltip on left">Tooltip on left</button>
<button class="btn"  data-tooltip="Tooltip top">Tooltip on top</button>
<button class="btn" data-position="bottom"  data-tooltip="Tooltip on bottom">Tooltip on bottom</button>
<button class="btn"  data-position="right" data-tooltip="Tooltip on right">Tooltip on right</button>

*/