JSFiddle - React, Tailwind, and code Playground

:focus tooltip

by Jennifer Perrin

HTML

<div class="container">
  <div class="info">
    <h1>:focus tooltip</h1>
  </div>
  <div class="form">
    <input class="form-input" placeholder="Select this to fold tooltip" type="text" />
    <div class="form-tooltip">Information only visible on :focus</div>
    <input class="form-input" placeholder="Or this to fold another" type="text" />
      <div class="form-tooltip">Another tooltip.<br /> Only this one with more content.</div>
  </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,600);
@-webkit-keyframes fold {
  0% {
    margin-bottom: -8px;
    visibility: visible;
    line-height: 0;
    -webkit-transform-origin: 0 0 0;
    -moz-transform-origin: 0 0 0;
    -ms-transform-origin: 0 0 0;
    -o-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
    -webkit-transform: rotate3d(1, 0, 0, -90deg);
    -moz-transform: rotate3d(1, 0, 0, -90deg);
    -ms-transform: rotate3d(1, 0, 0, -90deg);
    -o-transform: rotate3d(1, 0, 0, -90deg);
    transform: rotate3d(1, 0, 0, -90deg);
  }

  33.333% {
    margin-bottom: 4px;
    line-height: 16px;
    -webkit-transform: rotate3d(1, 0, 0, 0deg);
    -moz-transform: rotate3d(1, 0, 0, 0deg);
    -ms-transform: rotate3d(1, 0, 0, 0deg);
    -o-transform: rotate3d(1, 0, 0, 0deg);
    transform: rotate3d(1, 0, 0, 0deg);
  }

  66.667% {
    margin-bottom: 2px;
    -webkit-transform: rotate3d(1, 0, 0, 25deg);
    -moz-transform: rotate3d(1, 0, 0, 25deg);
    -ms-transform: rotate3d(1, 0, 0, 25deg);
    -o-transform: rotate3d(1, 0, 0, 25deg);
    transform: rotate3d(1, 0, 0, 25deg);
  }

  100% {
    margin-bottom: 0;
    visibility: visible;
    height: auto;
    -webkit-transform-origin: 0 0 0;
    -moz-transform-origin: 0 0 0;
    -ms-transform-origin: 0 0 0;
    -o-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
    -webkit-transform: rotate3d(1, 0, 0, 0deg);
    -moz-transform: rotate3d(1, 0, 0, 0deg);
    -ms-transform: rotate3d(1, 0, 0, 0deg);
    -o-transform: rotate3d(1, 0, 0, 0deg);
    transform: rotate3d(1, 0, 0, 0deg);
  }
}

@-moz-keyframes fold {
  0% {
    margin-bottom: -8px;
    visibility: visible;
    line-height: 0;
    -webkit-transform-origin: 0 0 0;
    -moz-transform-origin: 0 0 0;
    -ms-transform-origin: 0 0 0;
    -o-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
    -webkit-transform: rotate3d(1, 0, 0, -90deg);
    -moz-transform: rotate3d(1, 0, 0, -90deg);
    -ms-transform: rotate3d(1,...