Inputfield (with Tooltip)
CODE
×
HTML
<div class='help floating-label'> <input type=text value='' class='floating-label help' placeholder='Label'> <label class='floating-label'>Label</label> <img class='help' src='img/Help Icon.svg'> </div>
CSS
img.help { position: absolute; height: 31px; width: 31px; right: 16px; top: 33px; -webkit-transition: all 150ms ease-in-out; transition: all 150ms ease-in-out; cursor:pointer; } label.floating-label { font-size: 13px; line-height: 17px; font-family: 'Roboto'; font-style: normal; font-weight: 400; position:absolute; -webkit-transform: translateY(8px); -ms-transform: translateY(8px); transform: translateY(8px); -webkit-transition: all 250ms ease-out; transition: all 250ms ease-out; top: 1px; left: 23px; background-color: #fff; padding: 2px 5px; opacity:1; } img.help:hover, img.help:focus { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); } input[type=text].floating-label { padding-right: 62px; }
JS
Inputfield (with Tooltip)
×
Label