How to create a tool-tip just using pure CSS

You may be amazed to know that pure CSS is replacing the use of jQuery rapidly. In this tutorial you will be learning how to create a tool-tip without using jQuery and just using pure CSS.

The evolution of CSS (Cascading Style Sheet) helped and helping the Web Designers creating their projects in a little amount of time and beautifully as well. Now you don’t have to use any complicated jQueries to add a tool-tip to any HTML element, because we can create it using just pure CSS. As far as this tutorial is concerned we are going to target anchor tag for our tool-tip. We are going to use CSS Pseudo elements to make this tool-tip work. So let’s get started…

The CSS for tool-tip

So here’s the code that you are going to add into your CSS (either internal or external).

body{margin:auto;text-align:center;}

/*For the anchor tag*/
a:link{position:relative;text-decoration:none;}
/*Pseudo element before*/
a:before{
content: "";
position: absolute;
border-top: 20px rgba(0,0,0,1) solid;

border-left: 30px solid transparent;
border-right: 30px solid transparent;
display: none;
top: -17px;
left: -20px;}
/*Pseudo element after*/
a:after{ content:attr(ajotip); position:absolute;color:#FFFFFF;top:-33px;left:-26px;background:rgba(0,0,0,1);padding:5px 15px; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; white-space:nowrap;display:none; } /*Display the tool-tip on link hover*/ a:hover:after,a:hover:before{display:block;} 

The HTML for tool-tip
As you have added your CSS, it’s time to create our mark-up. OK so create a HTML document in which you can add above CSS or link your external CSS file into it.  

<p>Hover any of the link and you will see a black tooltip above the hyperlink which is 
actually generated by just using CSS Pseudo elements<br /><br /><br />Ut wisi enim <a href="https://webdesignerpad.com/" ajotip="WebDesignerPad">WebDesignerPad</a> Lorem ipsum dolorit met, cnsectetuer adifd iscing elit, ssdf ed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpa tff. Ut wisi enim <br /><a href="#" ajotip="Additional">additional</a> Lorem ipsum  doit aet, ectetuer adipiscng lit, se diam noeuis oeuismod tinc ffssidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enimoeuis oeuis...........</p>
Conclusion
Ok then now you are able to create a tool-tip just using pure CSS and no jQuery