title: Why does tooltip animation work with labels but not inputs
body: <p>I am trying to use <a href="https://codepen.io/neogomo/pen/BjqJzr" rel="nofollow noreferrer">this</a> animation to animate the tooltips for my inputs. Can someone tell me why it is not working.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* setup tooltips */
  
  .tooltip {
    position: relative;
  }
  
  .tooltip:before,
  .tooltip:after {
    display: block;
    opacity: 0;
    pointer-events: none;
    position: absolute;
  }
  
  .tooltip:after {
    border-right: 6px solid transparent;
    border-bottom: 6px solid rgba(0, 0, 0, .75);
    border-left: 6px solid transparent;
    content: '';
    height: 0;
    top: 20px;
    left: 20px;
    width: 0;
  }
  
  .tooltip:before {
    background: rgba(0, 0, 0, .75);
    border-radius: 2px;
    color: #fff;
    content: attr(data-title);
    font-size: 14px;
    padding: 6px 10px;
    top: 26px;
    white-space: nowrap;
  }
  
  
  /* the animations */
  
  
  /* fade */
  
  .tooltip.fade:after,
  .tooltip.fade:before {
    transform: translate3d(0, -10px, 0);
    transition: all .15s ease-in-out;
  }
  
  .tooltip.fade:hover:after,
  .tooltip.fade:hover:before {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  
  
  /* expand */
  
  .tooltip.expand:before {
    transform: scale3d(.2, .2, 1);
    transition: all .2s ease-in-out;
  }
  
  .tooltip.expand:after {
    transform: translate3d(0, 6px, 0);
    transition: all .1s ease-in-out;
  }
  
  .tooltip.expand:hover:before,
  .tooltip.expand:hover:after {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
  
  .tooltip.expand:hover:after {
    transition: all .2s .1s ease-in-out;
  }
  
  
  /* swing */
  
  .tooltip.swing:before,
  .tooltip.swing:after {
    transform: translate3d(0, 30px, 0) rotate3d(0, 0, 1, 60deg);
    transform-origin: 0 0;
    transition: transform .15s ease-in-out, opacity .2s;
  }
  
  .tooltip.swing:after {
    transform: translate3d(0, 60px, 0);
    transition: transform .15s ease-in-out, opacity .2s;
  }
  
  .tooltip.swing:hover:before,
  .tooltip.swing:hover:after {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate3d(1, 1, 1, 0deg);
  }
  
  
  /* basic styling: has nothing to do with tooltips: */
  
  body,
  div {
    width: 100%;
    padding: 0px;
    margin: 0px;
  }
  
  div h1 {
    padding: 10px;
  }
  
  ul {
    margin-bottom: 40px;
  }
  
  li {
    cursor: pointer;
    display: inline-block;
    padding: 0 10px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;h1 class="tooltip fade" data-title="Works with headers"&gt;Header (Fade)&lt;/h1&gt;
    &lt;h1 class="tooltip expand" data-title="Works with headers"&gt;Header (Expand)&lt;/h1&gt;
    &lt;h1 class="tooltip swing" data-title="Works with headers"&gt;Header (Swing)&lt;/h1&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
    &lt;p class="tooltip fade" data-title="Works with headers"&gt;Paragraph (Fade)&lt;/p&gt;
    &lt;p class="tooltip expand" data-title="Works with headers"&gt;Paragraph (Expand)&lt;/p&gt;
    &lt;p class="tooltip swing" data-title="Works with headers"&gt;Paragraph (Swing)&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
    &lt;input class="tooltip fade" data-title="Works with headers" value='Paragraph (Fade)'&gt;
    &lt;input class="tooltip expand" data-title="Works with headers" value='Paragraph (Expand)'&gt;
    &lt;input class="tooltip swing" data-title="Works with headers" value='Paragraph (Swing)'&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>