#CODEPEN #SCSS #ANIMATION #FORMS #CSS3: focus tooltip - Tooltips folding out on :focus of the input fields. Done with CSS3 http://codepen.io/orioltf/pen/LpGwA http://codepen.io/vpegado/pen/daugx

index.haml

.container
	.info
		%h1 :focus tooltip
	.form
		%input.form-input{:type => "text", :placeholder => "Select this to fold tooltip"}
		.form-tooltip Information only visible on :focus
		%input.form-input{:type => "text", :placeholder => "Or this to fold another"}
		.form-tooltip Another tooltip with.<br> Only this with some more content.
	.info
		%p
			Written by
			%a{:href => "http://pegado.se", :target => "_blank"} Victor Pegado

style.scss

@import "compass";
@mixin animation($value) {
	@include experimental(animation, $value,
		-moz, -webkit, -o, not -ms, not -khtml, official);
}
@mixin keyframes($name){
	@-webkit-keyframes #{$name} { @content; }
	@-moz-keyframes #{$name} { @content; }
	@-o-keyframes #{$name} { @content; }
	@keyframes #{$name} { @content; }
}

@mixin placeholder {
	&.placeholder {@content; }
	&:-moz-placeholder {@content; }
	&::-webkit-input-placeholder {@content; }
}

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);

@include keyframes(fold) {
	0% {
		margin-bottom: -8px;
		visibility: visible;
		line-height: 0;
		@include transform-origin(0, 0, 0);
		@include transform(rotate3d(1, 0, 0, -90deg));
	}
	33.333% {
		margin-bottom: 4px;
		line-height: 16px;
		@include transform(rotate3d(1, 0, 0, 0deg));
	}
	66.667% {
		margin-bottom: 2px;
		@include transform(rotate3d(1, 0, 0, 25deg));
	}
	100% {
		margin-bottom: 0;
		visibility: visible;
		height: auto;
		@include transform-origin(0, 0, 0);
		@include transform(rotate3d(1, 0, 0, 0deg));
	}
}

body {
	background: #eee;
	@include perspective(400);
	font-family: 'Open Sans', sans-serif;
	-webkit-font-smoothing: antialiased;
}

.container {
	width: 100%;
	max-width: 320px;
	margin: 32px auto;
}
.info {
	color: #666;
	h1 {
		margin: 8px 0;
		font-weight: 300;
	}
	p {
		margin: 8px 0;
		font-weight: 300;
		font-size: 14px;
		& > a,
		& > a:visited {
			color: #666;
			text-decoration: none;
			&:hover {
				text-decoration: underline;
			}
		}
	}
}

.form-input {
	@include appearance(none);
	@include border-radius(0);
	@include box-sizing(border-box);
	-webkit-font-smoothing: antialiased;
	font-family: 'Open Sans', sans-serif;
	outline: none;
	border: none;
	line-height: 1;
	width: 100%;
	height: 32px;
	padding: 0 16px;
	font-size: 14px;
	margin-top: 2px;
	color: #666;
	@include placeholder {
		font-style: italic;
		color: #AAA;
	}
}
.form-tooltip {
	display: block;
	visibility: hidden;
	overflow: hidden;
	@include box-sizing(border-box);
	height: 0;
	margin-bottom: -8px;
	cursor: help;
	@include animation(fold 500ms ease-in reverse);
	:focus + & {
		margin-bottom: 0;
		height: auto;
		visibility: visible;
		@include animation(fold ease-in 500ms);
	}
	padding: 4px 16px;
	background: #bbb;
	color: #fff;
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
}