This is my code modification, i have a bug with tooltip hover opacity: 0 is showing, but, only hover "?" should showing tooltip.
Original code:
<form> | |
<input type="text" placeholder="username"/> | |
<div id="anim"> | |
<span class="button-tooltip">?</span> | |
<div class="tooltip" data-tooltip="username must consist of 29 symbols."/> | |
</form> | |
</div> |
$blue: #10A3B1; | |
@import url('https://fonts.googleapis.com/css?family=Roboto:400,500'); | |
body { | |
background: #424B54; | |
font-family: 'Roboto', sans-serif; | |
overflow: hidden; | |
} | |
form { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
position: relative; | |
width: 100%; | |
height: 100vh; | |
} | |
input { | |
border: none; | |
width: 170px; | |
height: 25px; | |
outline: none; | |
padding-left: 10px; | |
} | |
.button-tooltip { | |
position: relative; | |
background: $blue; | |
padding: 6px 12px; | |
margin: 5px; | |
font-size: 15px; | |
border-radius: 50%; | |
color: #FFF; | |
} | |
.tooltip:after, | |
.tooltip:before { | |
position: absolute; | |
content: ''; | |
opacity: 0; | |
transition: all 0.4s ease; | |
} | |
.tooltip:before { | |
border-width: 10px 8px 0 8px; | |
border-style: solid; | |
border-color: $blue transparent transparent transparent; | |
top: -15px; | |
left: 13px; | |
transform: translateY(20px); | |
} | |
.tooltip:after { | |
content: attr(data-tooltip); | |
background: $blue; | |
color: #fff; | |
width: 160px; | |
height: 40px; | |
font-size: 13px; | |
font-weight: 300; | |
top: -75px; | |
left: -65px; | |
padding: 10px; | |
border-radius: 5px; | |
letter-spacing: 1px; | |
transform: translateY(20px); | |
} | |
.button-tootltip:hover, | |
.tooltip:after, | |
.tooltip:before { | |
opacity: 1; | |
transform: translateY(-2px); | |
} | |
@keyframes shake { | |
0% { | |
transform: rotate(2deg); | |
} | |
50% { | |
transform: rotate(-3deg); | |
} | |
70% { | |
transform: rotate(3deg); | |
} | |
100% { | |
transform: rotate(0deg); | |
} | |
} | |
#anim:hover { | |
animation: shake 500ms ease-in-out forwards; | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> |