A CodePen by Victor Pegado. :focus tooltip - Tooltips folding out on :focus of the input fields. Done with CSS3

index.haml

.container
  .info
    %h1 :focus tooltip
  .form
    %input#input0.form-input{:type => "text", :placeholder => "Select this to fold tooltip"}
    .form-tooltip Information only visible on :focus
    %input#input1.form-input{:type => "text", :placeholder => "Or this to fold another."}
    .form-tooltip Information only visible on :focus

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; }
}

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

body {
  background: #eee;
  @include perspective(400);
}

.container {
  width: 100%;
  max-width: 320px;
  margin: 32px auto;
}
.info {
  h1 {
    margin: 8px 0;
    color: #666;
  }
}

.form-input {
  @include appearance(none);
  @include border-radius(0);
  @include box-sizing(border-box);
  -webkit-font-smoothing: antialiased;
  outline: none;
  border: none;
  line-height: 1;
  width: 100%;
  height: 32px;
  padding: 0 16px;
  font-size: 14px;
  margin-top: 2px;
}
.form-tooltip {
  display: block;
  visibility: hidden;
  overflow: hidden;
  @include box-sizing(border-box);
  height: 0;
  margin-bottom: -8px;
  @include animation(fold 500ms ease-in reverse);
  :focus + & {
    margin-bottom: 0;
    height: 24px;
    visibility: visible;
    @include animation(fold ease-in 500ms);
  }
  padding: 4px 16px;
  background: #bbb;
  color: #fff;
  font-size: 12px;
  line-height: 14px;
}