<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/vpegado/pen/daugx?depth=everything&order=popularity&page=9&q=input&show_forks=false" />
<script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">@import url(https://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;
transform-origin: 0, 0, 0;
-webkit-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);
transform: rotate3d(1, 0, 0, 0deg);
}
66.667% {
margin-bottom: 2px;
-webkit-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;
transform-origin: 0, 0, 0;
-webkit-transform: rotate3d(1, 0, 0, 0deg);
transform: rotate3d(1, 0, 0, 0deg);
}
}
@keyframes fold {
0% {
margin-bottom: -8px;
visibility: visible;
line-height: 0;
-webkit-transform-origin: 0, 0, 0;
transform-origin: 0, 0, 0;
-webkit-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);
transform: rotate3d(1, 0, 0, 0deg);
}
66.667% {
margin-bottom: 2px;
-webkit-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;
transform-origin: 0, 0, 0;
-webkit-transform: rotate3d(1, 0, 0, 0deg);
transform: rotate3d(1, 0, 0, 0deg);
}
}
::-webkit-input-placeholder {
font-style: italic;
color: #AAA;
}
::-moz-placeholder {
font-style: italic;
color: #AAA;
}
:-ms-input-placeholder {
font-style: italic;
color: #AAA;
}
::placeholder {
font-style: italic;
color: #AAA;
}
body {
background: #eee;
-webkit-perspective: 400;
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;
}
.info h1 {
margin: 8px 0;
font-weight: 300;
}
.info p {
margin: 8px 0;
font-weight: 300;
font-size: 14px;
}
.info p > a, .info p > a:visited {
color: #666;
text-decoration: none;
}
.info p > a:hover, .info p > a:visited:hover {
text-decoration: underline;
}
.form-input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 0;
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;
}
.form-tooltip {
display: block;
visibility: hidden;
overflow: hidden;
box-sizing: border-box;
height: 0;
margin-bottom: -8px;
cursor: help;
-webkit-animation-name: fold;
animation-name: fold;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
-webkit-animation-direction: reverse;
animation-direction: reverse;
padding: 4px 16px;
background: #bbb;
color: #fff;
font-weight: 600;
font-size: 12px;
line-height: 16px;
}
:focus + .form-tooltip {
margin-bottom: 0;
height: auto;
visibility: visible;
-webkit-animation: fold ease-in 500ms;
animation: fold ease-in 500ms;
-webkit-animation-direction: normal;
animation-direction: normal;
}
</style></head><body>
<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 with.<br> Only this with some more content.</div>
</div>
<div class='info'>
<p>
Written by
<a href='https://twitter.com/vpegado' target='_blank'>Victor Pegado</a>
</p>
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >
//# sourceURL=pen.js
</script>
</body></html>
