Having curiosity, I tried to create simple tooltips using additional HTML element or JavaScript i.e. through pure CSS, and found out some tricks to get an improvement into it.

This article is a step-by-step tutorial that will help you understand these CSS tricks so you can make too pure-CSS tooltips.

You’ll know how to add a tooltip to any element by adding a simple attribute, at the end of reading this post

The problem

I required to build a custom tooltip for my project.

I began searching on Google “CSS Tooltip Generator.” I landed on a page with quite a few generators. Their technique was to add a span with an absolute position inside the element you want a tooltip for.

But I already had an otherwise-complete project. It didn’t seemed to be a good idea to go back through and add all these span elements throughout my project. This would take time and will make my HTML more complex. There had to be a better way.

Finally, I found an amazing post about tooltips. In that post, it explained, a smart trick that used to create a tooltip using the :: before and :: after CSS selectors.

This trick wasn’t generic enough, but it was smart and clean.

Improving upon the solution

We’ll try to make this trick more generic and will discover more about some CSS properties. Here’s what we ultimately want to be able to do:

 It doesn’t come up with that much, but we want to be able to identify the tooltip position easily:

 First ,  we’ll add a before and an afterpseudo element to the button.

::after and ::before are pseudo-elements, which allow you to insert content onto a page from CSS before or after the content of the element. They work like this:

 The result looks something like this:

Let’s walk through this step-by-step

Step 1: we’ll add a tooltip attribute like this:

We require ::after and ::before pseudo-elements. The objects will be a simple rectangle containing the content of the tooltip. We build a simple rectangle with CSS by adding a border around an empty element that we create with the content property.

To show the tooltip content, the element used is ::before pseudo-element. We add it with the property content and extract the tooltip attribute value. Like in our example, the value for content could be a string, an attribute value from the element, or even an image with url(path/image.png).

The button element’s position must be relative, to make this work. Which means, the position of all elements inside the button is relative to the position of the button element itself.

We add also some position tricks to make the tooltip in the center with the transform property and this the result.

The CSS is given below:

button{

  margin:auto;
  background: #3498db;
  font-family: Arial;
  color: #ffffff;
  font-size: 14px;
}
[tooltip]{
  margin:20px;
  position:relative;
}

[tooltip]::before {
    content: "";    position: absolute;
    top:-6px;
    left:50%;
    transform: translateX(-50%);
    border-width: 4px 6px 0 6px;
    border-style: solid;
    border-color: rgba(0,0,0,0.7) transparent transparent     transparent;
    z-index: 100;

}

[tooltip]::after {
    content: attr(tooltip);
    position: absolute;
    left:50%;
    top:-6px;
    transform: translateX(-50%)   translateY(-100%);
    background: rgba(0,0,0,0.7);
    text-align: center;
    color: #fff;
    padding:4px 2px;
    font-size: 12px;
    min-width: 80px;
    border-radius: 5px;
    pointer-events: none;

}

view rawstep1-tooltip.css hosted with ❤ by GitHub 

Step 2: we have only worked upon the ::before and ::after pseudo-elements to create a tooltip position. Our button HTML code is like below:

The tooltip-position can be: top, bottom, right, or left.

[tooltip-position='left']::before{
  left:0%;
  top:50%;
  margin-left:-12px;
  transform:translatey(-50%) rotate(-90deg)
}

[tooltip-position='top']::before{
  left:50%;
}

[tooltip-position='bottom']::before{
  top:100%;
  margin-top:8px;
  transform: translateX(-50%) translatey(-100%) rotate(-180deg)
}

[tooltip-position='right']::before{
  left:100%;
  top:50%;
  margin-left:1px;
  transform:translatey(-50%) rotate(90deg)

}
[tooltip-position='left']::after{
  left:0%;
  top:50%;
  margin-left:-8px;
  transform: translateX(-100%)   translateY(-50%);
}
[tooltip-position='top']::after{
  left:50%;
}

[tooltip-position='bottom']::after{
  top:100%;
  margin-top:8px;
  transform: translateX(-50%) translateY(0%);

}
[tooltip-position='right']::after{
  left:100%;
  top:50%;
  margin-left:8px;
  transform: translateX(0%)   translateY(-50%);

}

view rawstep2-tooltip.css hosted with ❤ by GitHub 

Step 3: In this final step, we will add a simple hover animation to the tooltip that you are familiar with, and can try it on your own.

Also Read:mobile app development using apache cordova