A Pen by Paul Reny.

:focus-tooltip.markdown

:focus tooltip

Tooltips folding out on :focus of the input fields. Done with CSS3

A Pen by Paul Reny on CodePen.

License.

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", :readonly => true}
    .form-tooltip Another tooltip with.<br> Only this with some more content.
  .info
    %p
      Written by
      %a{:href => "https://twitter.com/vpegado", :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 {
  position: relative;
  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;
}