<div class="wrapper">
	<h1>Friendly Little Tooltips</h1>
	<ul class="social-links">
		<li>
			<a href="https://codepen.io/joshua_ward/pens/public/" target="_blank" data-tooltip="Codepen" data-position="top" class="top">
				<i class="fa fa-codepen"></i></a>
		</li>
		<li>
			<a href="https://dribbble.com/joshua_ward" target="_blank" data-tooltip="Dribbble" data-position="right" class="right">
				<i class="fa fa-dribbble"></i></a>
		</li>
		<li>
			<a href="https://twitter.com/joshua_ward" target="_blank" data-tooltip="Twitter" data-position="bottom" class="bottom">
				<i class="fa fa-twitter"></i></a>
		</li>
		<li>
			<a href="https://www.geekstudios.co" target="_blank" data-tooltip="Website" data-position="left" class="left">
				<i class="fa fa-globe"></i></a>
		</li>
	</ul>
</div> 

@import "bourbon";
@import "neat";
 
body {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100vh;

	background-image: url('https://static.pexels.com/photos/338533/pexels-photo-338533.jpeg');
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;

	&:before {
		position: absolute;
		content: '';
		width: 100%;
		height: 100%;
		background: #c21500; 
		background: -webkit-linear-gradient(45deg, #651fff, #ffc500);
		background: linear-gradient(45deg, #651fff, #ffc500);
		opacity: 0.9;
		z-index: 0;
	}
}

.icon {
	position: relative;
	display: inline-block;
	width: 24px;
	height: 24px;
	color: white;
	-webkit-mask: 
		url('http://geekstudios.co/testing/assets/svg/logo.svg')
		no-repeat center;
	mask: 
		url('http://geekstudios.co/testing/assets/svg/logo.svg')
		no-repeat left center;
	-webkit-mask-size: 24px;
	mask-size: 24px;
	background-color: white;
}

.wrapper {
	width: 50%;
	height: 50%;
	
	h1 {
		position: relative;
		display: block;
		//flex: 1 100%;
		width: 100%;
		margin: 0;
		padding: 0;
		font-weight: 100;
		color: white;
		letter-spacing: 1px;
		line-height: 3;
		text-align: center;
	}
	
	.social-links {
		position: relative;
		width: 100%;
		margin: 0;
		padding: 0;
		list-style-type: none;
		
		li {
			display: inline-block;
			width: 25%;
			text-align: center;
			float: left;
			
			a {
				font-size: 24px;
				color: whitesmoke;
			}
		}
	}
}

// animations
a[data-tooltip].top {
	&:before,
	&:after {
		transform: translateY(10px);
	}
	
	&:hover:after,
	&:hover:before {
		transform: translateY(0px);
	}
}

a[data-tooltip].right {
	&:before,
	&:after {
		transform: translateX(0px);
	}
	
	&:hover:after,
	&:hover:before {
		transform: translateX(10px);
	}
}

a[data-tooltip].bottom {
	&:before,
	&:after {
		transform: translateY(-10px);
	}
	
	&:hover:after,
	&:hover:before {
		transform: translateY(0px);
	}
}

a[data-tooltip].left {
	&:before,
	&:after {
		transform: translateX(0px);
	}
	
	&:hover:after,
	&:hover:before {
		transform: translateX(-10px);
	}
}

a[data-tooltip] {
	position: relative;

	&:after,
	&:before {
		position: absolute;
		visibility: hidden;
		opacity: 0;
		transition: transform 200ms ease, opacity 200ms;
		box-shadow: 0 0 10px rgba(black,0.3);
		z-index: 99;
	}

	&:before {
		content: attr(data-tooltip);
		background: #000;
		color: #fff;
		font-size: 10px;
		font-weight: bold;
		padding: 10px 15px;
		border-radius: 5px;
		white-space: nowrap;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 1px;
	}

	&:after {
		width: 0;
		height: 0;
		border: 6px solid transparent;
		content: '';
	}

	&:hover:after,
	&:hover:before {
		visibility: visible;
		opacity: 0.85;
		transform: translateY(0px);
	}
}

// top tooltip
a[data-tooltip][data-position="top"]:before {
	bottom: 100%;
	left: -130%;
	margin-bottom: 10px;
}

a[data-tooltip][data-position="top"]:after {
	border-top-color: #000;
	border-bottom: none;
	bottom: 101%;
	left: calc(50% - 6px);
	margin-bottom: 4px;
}
// left tooltip
a[data-tooltip][data-position="left"]:before {
	top: -12%;
	right: 100%;
	margin-right: 10px;
}

a[data-tooltip][data-position="left"]:after {
	border-left-color: #000;
	border-right: none;
	top: calc(50% - 3px);
	right: 100%;
	margin-top: -6px;
	margin-right: 4px;
}
// right tooltip
a[data-tooltip][data-position="right"]:before {
	top: -5%;
	left: 100%;
	margin-left: 10px;
}

a[data-tooltip][data-position="right"]:after {
	border-right-color: #000;
	border-left: none;
	top: calc(50% - 6px);
	left: calc(100% + 4px);
}

// bottom tooltip
a[data-tooltip][data-position="bottom"]:before {
	top: 100%;
	left: -130%;
	margin-top: 10px;
}

a[data-tooltip][data-position="bottom"]:after {
	border-bottom-color: #000;
	border-top: none;
	top: 100%;
	left: 5px;
	margin-top: 4px;
}