Skip to content

CSS Animation Tooltip


CSS Animation Tooltip



<!DOCTYPE html>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="cssTooltip.css">
    <link rel="stylesheet" href="" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

        <input type="text" placeholder="username" />
        <div id="anim">
            <span class="tooltip" data-tooltip="username must consist of 29 symbols.">?</span>



body {
    background: #333;
    overflow: hidden;
form {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 100%;
    height: 100vh;
input {
    border: none;
    width: 175px;
    height: 30px;
    outline: none;
    padding-left: 10px;
    font-weight: bold;
    font-family: Verdana;
    color: #ae3535;
    border-radius: 15px 0px 0px 15px;
    box-shadow: 0px 0px 30px #000;
.tooltip {
    position: relative;
    background: #ae3535;
    padding: 9px 15px;
    margin: 5px;
    font-size: 15px;
    border-radius: 100%;
    color: #FFF;
    font-family: Verdana;
.tooltip:after {
  position: absolute;
  content: '';
  opacity: 0;
  transition: all 0.4s ease;
.tooltip:before {
  border-width: 10px 8px 0 8px;
  border-style: solid;
  border-color: #ae3535 transparent transparent transparent;
  top: -15px;
  transform: translateY(20px);
.tooltip:after {
  content: attr(data-tooltip);
  background: #ae3535;
  width: 160px;
  height: 40px;
  font-size: 12px;
  top: -75px;
  left: -10px;
  padding: 10px;
  border-radius: 5px;
  letter-spacing: 1px;
  transform: translateY(20px);
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
.tooltip:hover::after {
  opacity: 1;
  transform: translateY(-2px);
#anim:hover {
    animation: shake 400ms ease-in-out forwards;

@keyframes shake {
  0% {
    transform: rotate(5deg);
  50% {
    transform: rotate(-5deg);
  70% {
    transform: rotate(8deg);
  100% {
    transform: rotate(0deg);

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: