How to create an add a custom tooltip in website

Hello Friends today I am going to share some creative thing and codes here. As you saw the title of this post we are going to create a custom tooltip with the help of Css only

Demo: Hover on me to see Tooltip.

As you have seen there is bydefault tooltip in browser which we can show to users using title attribute in the tag. But we can not customize that tooltip as we want. There are many advantages of using a custom tooltip like:

• Attracts users
• Clearly specifies the title or name of that element

Read the post where we have given a step by step tutorial to make tooltip and how to implement it in your website or Skip to the final code

Lets start from the first:

Creating a tooltip container

<span data-text="Hello! I am a Tooltip" class='tooltip'>Hover on me to see Tooltip.</span>

Using data-text attribute we can use the same class for many elements that means no need to create extra class or same code for seperate elements

  .tooltip{
        position:relative
  }
  .tooltip:before {
        content: attr(data-text);
        z-index: 2;
        font-size: 12px;
        position: absolute;
        width: auto;
        padding: 5px;
        border-radius: 2px;
        background: #454545;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        display: none;
       
    }

Here we can change data-text with any of the attribute you want like title or arial-labelfor representing the text inside attribute

We have to display the tooltip on element hover that's why we have added display:none in .tooltip:before.To display it on hovering on element we will use css given below :

  .tooltip:hover:before {
        display: block;
    }

Now your result will look someting like this:

Hover to see

As we can see the tooltip is showing on the text so How to solve this?see here.

Tooltip position

Here we are creating four class .top .bottom .right .left for four position top, bottom, right and left.

  

  .tooltip.bottom:before {
        bottom: initial;
        margin: initial;
        top: 100%;
        margin-top: 8px;

    }

    .tooltip.top:before {
        top: initial;
        margin: initial;
        bottom: 100%;
        margin-bottom: 8px;

    }

    .tooltip.left:before {
        left: initial;
        margin: initial;
        right: 100%;
        margin-right: 8px;
        top:50%;
  transform:translateY(-50%);

    }

    .tooltip.right:before {
        right: initial;
        margin: initial;
        left: 100%;
        margin-left: 8px;
        top:50%;
  transform:translateY(-50%);

    }
  

Lets take an example for showing tooltip on right poition

<span data-text="Hello! I am a Tooltip" class='tooltip right'>Hover on me to see Tooltip.</span>

So the result will be:

Hover to see Tooltip.

As like abouve example if you want to show tooltip at left side add class='left' or same for top and bottom

Final code

<span data-text="Hello! I am a Tooltip" class='tooltip right'>Hover on me to see Tooltip.</span>

 <style> 
    .tooltip {
        position: relative;
    }

    .tooltip.bottom:before {
        bottom: initial;
        margin: initial;
        top: 100%;
        margin-top: 8px;

    }

    .tooltip.top:before {
        top: initial;
        margin: initial;
        bottom: 100%;
        margin-bottom: 8px;

    }

    .tooltip.left:before {
        left: initial;
        margin: initial;
        right: 100%;
        margin-right: 8px;
        top:50%;
  transform:translateY(-50%);

    }

    .tooltip.right:before {
        right: initial;
        margin: initial;
        left: 100%;
        margin-left: 8px;
        top:50%;
  transform:translateY(-50%);

    }

    .tooltip:before {
        content: attr(data-text);
        z-index: 2;
        font-size: 14px;
        position: absolute;
        width: auto;
        padding: 5px;
        border-radius: 2px;
        background: #454545;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        display: none;
       

    }

    .tooltip:hover:before {
        display: block;
    

    }
    </style>
    

Here we have done creating custome tooltip for webiste.so the question will be where to add this code, just find </head> tag in your website and paste the code about </head> tag.

Conclusion

Thanks for reading this post and try to share it with friends.Thanksyou have a good day

Go to Link