How to create a tool-tip just using pure CSS

3 comments
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="http://www.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

Found this article VALUABLE?

Get more valuable articles like this one [FREEBIES Incl.], just by signing up below.

I take your privacy very seriously

3 comments :

  1. What you build with this tutorial?

    ReplyDelete
  2. Can you mention browser support for this solution? One reason to use jQuery is for its support.

    ReplyDelete
    Replies
    1. This tooltip is created purely using CSS3 and it will support every browser with a support for CSS3. Thanks for asking.

      Delete