How to Create Pure CSS Tooltip Without Using jQuery or Javascript

Показать описание

How to Create Pure CSS3 and HTML5 Tooltip Without Using jQuery or Javascript with demo example.
You are going to create pure CSS tooltip using single html anchor tag.

We are just using a single html anchor element and html5 data attribute to create a stylish tooltip with left arrow using pure css only and utilizing css3 after and before selectors. No other tags are used or neither any javascript or jquery. Everything we do is just by using CSS only.

Download tooltip source code from codepen:

In this video you'll learn to create a css tooltip also known as css infotip or hint message. I am going to explain every bit possible, related to html5 css3 tooltip only. You will see how its easy to create html5 toolip using css properties only.

Key takeaways from this html5 css3 based tooltip video tutorial
You will learn to use:
- HTML5 data attribute to set the tooltip title
- CSS3 after and before pseudo selectors to create tooltip left arrow without images.
- CSS3 transitions add css tooltip animation
- CSS3 attrib() method and CSS content property to retrieve data from the html5 data-attribute from anchor tag.
- And finally you will create an amazing tooltip css only and adding animation to your tooltip.

Basically tooltip is used to display information to the user when they hover over their cursor to some images, icons, text or links. Tooltips can be very useful to display information when there is space constraints in design. By using infotip or hint you can display long descriptions to the user without affecting your design.

Creating tooltips using pure css have never been so easier, but here you'll see the clever use of CSS3 after and before pseudo selector and the most importantly you will see the use of content property of CSS3 and its attrib() method, By using attrib() method we'll fetch the information from the element's attribute.

You'll learn how to create a custom attribute to an element and then fetch information from this attribute to your document by mere use of CSS3 content property. Then I'll style the information and initially make it hidden by setting its opacity to none and visibility property to hidden.
And on the hover state I'll show you how to again use after & before pseudo selectors to display the tooltip.

You'll also learn to create the triangle shape speech bubble using pure CSS3. For this I'll be using CSS3 Border property. You can create triangle by setting the one side of border to solid color and other two sides of the border to solid transparent.

Finally, In this video lots of stuffed is packed. Just watch this video and reveals the powerful magic of CSS3.

One thing to mention here friends,
Please do not forget to provide feedback in comments section. And please hit like if you like it and share with your friends and finally subscribe this channel to learn lots of about web design and development.

You can visit my codepen account for more stuff like this:

You can follow me on my twitter account here:

You can add me on facebook too :)

Share this video and Subscribe to this channel for latest updates and web design tips and tricks.

Waiting for feedback :) . Drop a comment