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.
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...
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.