Skip to content
Advertisements

CSS Animation Tooltip

Codepen:

CSS Animation Tooltip

Github: https://github.com/furkangulsen98/HTML-CSS-JAVASCRIPT/tree/master/CSS%20Tooltip


HTML CODE:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page</title>
    <link rel="stylesheet" type="text/css" href="cssTooltip.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>

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

</body>
</html>

CSS CODE:

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:before,
.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::before,
.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);
  }
}

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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: