A tooltip is a short message that appears when a user interacts with a specific element on a website or in a mobile app. It can be a pop-up box or overlay that provides additional information about the element. Tooltips can appear when a user hovers over an element, presses and holds, or lands on a page.
Common uses of tooltips:
• Labels: Providing short information about icons or symbols.
• Definitions: Explaining terms or acronyms of words or sentences.
• Help: Offering brief instructions or guidance.
As we have seen tooltip is very useful specially when we have huge and complex project which contains lot of elements and data. There are many libraries which provide tooltips like Bootstrap & Material UI but here we are going to learn creating tooltip with just html & css.
Creating a Tooltip with HTML and CSS.
HTML
We will create a div with class tooltip. Inside it we will create two elements 1. span, when hovered will trigger the tooltip. 2. div with class tooltipText which will contain actual tooltip text/contain.
CSS
• We will add position: relative; to tooltip which will help us to position the tooltip absolutely within its parent.
• Now add position: absolute; to tooltipText which positions the tooltip relative to its parent & also add display: none; because by default tooltip will be hidden (you can adjust position of tooltip by top, bottom, left & right).
• We only want to display tooltip when we hover on text for that we for that we will add this property .textDiv:hover .tooltip { display: block; }
Below is final code and output.
You can customize the appearance and behavior of the tooltip by modifying the CSS properties.