Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

WDS64 - Let's Make Cool Tooltips

In the last article, we learned about dropdown menus using CSS. It uses very simple concepts like pseudo-classes, display property in CSS and HTML lists. Today using same concepts, we are going to create Tooltips. Tooltips are used for giving user extra information about a hovered item like buttons, links or any other text or images.
Let's begin...

Create Basic Tooltip

Important points to note:
  • Create div containing text to hover inside which another div containing text to be shown after hovering
  • Initially hide the content of second div using visibility property
  • Use :hover pseudo-class on the first div to change visibility property of the second div
Create tooltip example yourself before looking the code...

Position Tooltips

In the previous example, the tooltip was positioned on Left, but we can change position as per our choice. We can do this by setting left, right, top and bottom properties on the div containing tooltip. Here are the values you can directly use for positioning accordingly:
  • Left Tooltip: top: -5px, left: 110%
  • Right Tooltip: top: -5px, right: 110%
  • Top Tooltip: bottom: 100%, left: 50%
  • Bottom Tooltip: top: 100%, left: 50%
We can also add various animations to this tooltips but we will see them after we learn animations in CSS. That's all for today. In the next article, we will learn about images structuring in CSS for multiple images. 
Till then #keepCoding.

This post first appeared on The Coding Express, please read the originial post: here

Share the post

WDS64 - Let's Make Cool Tooltips


Subscribe to The Coding Express

Get updates delivered right to your inbox!

Thank you for your subscription