Creating an awesome Tooltip in css.

Awesome tooltips are made by crazy peoples.

First let’s create a button .

<button class = "button"> Button </button>

Add some style to it, to make the button looks great,

.button {
   position: relative;
   background: #E5C388;
   padding: 10px;
   border-radius: 4px;
   border: none;
   text-transform: uppercase;
   font-weight: bold;
   color: white;
}

The position property of button is set to relative so that we can add the tooltip position absolute with respective to the button.

Now the button looks like

Let’s add tool tip to the button

<button class = "button"> 
      Button 
      <span class="tooltip">Javascript Jeep </span>  
</button>

Now the button looks like

Let’s add some css to make the span as tooltip.

.tooltip {
 
  position: absolute; // absolute to button
bottom : 110%; // the span is moved to top of the button
background-color: #333;
border-radius: 3px;
font-size: 10px;
color: #eee;
}

Resulting button is

To create a triangle at the end we can use :after property in span

.tooltip:after {
 
  position: absolute;
content: "";
top: 100%; //to set the triangle at end
left: 10%; // left side moved 10% so it looks like tooltip
// this border property makes the triangle
border-top: 5px solid #333;
border-right: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid transparent;
}

To make the span display like a tooltip , we need to hide the tooltip and show only when user hover over the button .

For that add display: none to the .tooltip class.

.tooltip {
 
  position: absolute; // absolute to button
bottom : 110%; // the span is moved to top of the button
background-color: #333;
border-radius: 3px;
font-size: 10px;
color: #eee;
display : none; //hide the tooltips
}
// on hover over .btn it makes the .tooltip display block
.button : hover > .tooltip {
display : block;
}

Also add animation to tooltip class to make it more beautiful.

.tooltip {
animation: moveup 0.1s linear;
}
@keyframes moveup {
  0% {
//for rotating effect rotate is set 25deg at beggining
transform: translateY(10px) rotate(25deg);
opacity: 0;
}
100% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
}

So that’s it we have created an awesome tooltip with a cool effect .

Follow Javascript Jeep🚙 🥶.