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🚙 🥶.