In this CSS article we want to learn How to Create CSS Tooltip, Tooltips are small pop up boxes that appear when the user hovers over an element. they can be great way to provide additional information to users without cluttering up the main interface. in this css tutorial we want to learn how to create css tooltip.
How to Create CSS Tooltip
So first if all we need to create the HTML structure for the tooltip. we can use span element to contain the tooltip content. in the bewlow example the outer span element will be the element that the user hovers over. inner span element will contain the tooltip content. by default we will hide the tooltip content using CSS.
|
1 2 3 |
<span class="tooltip">Hover over me <span class="tooltip-content">This is the tooltip content</span> </span> |
Also you can style tooltip using CSS. we will use :hover pseudo class to show and hide the tooltip content. this is the CSS code, in this CSS code we set the position of the outer span element to relative, which allows us to position tooltip content using absolute positioning. we also set z-index of the tooltip content to 1 which ensures that it appears on top of other elements. tooltip content itself is styled with dark background color, white text, padding and border-radius to give it rounded appearance. by default we set the display property to none, which hides the tooltip content, and lastly we use :hover pseudo-class to show the tooltip content when the user hovers over the outer span element.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.tooltip { position: relative; display: inline-block; } .tooltip-content { position: absolute; z-index: 1; background-color: #555; color: #fff; padding: 5px; border-radius: 5px; display: none; } .tooltip:hover .tooltip-content { display: block; } |
You can also customize the tooltip further by adding your own styles. for example you can change the background color, font size and border radius. this is an example.
|
1 2 3 4 5 6 7 |
.tooltip-content { background-color: #ffcc00; color: #333; font-size: 14px; padding: 10px; border-radius: 10px; } |
If you want to add JavaScript interactions to your tooltip, you can use onmouseover and onmouseout events. this is an example.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<span class="tooltip" onmouseover="showTooltip()" onmouseout="hideTooltip()">Hover over me <span class="tooltip-content">This is the tooltip content</span> </span> <script> function showTooltip() { document.querySelector('.tooltip-content').style.display = 'block'; } function hideTooltip() { document.querySelector('.tooltip-content').style.display = 'none'; } </script> |
This is the complete code, هn this example we have created simple HTML page with heading and some text. we have also added two tooltips using the HTML and CSS code provided in the earlier example. first tooltip uses the default styles defined in the CSS. second tooltip has been customized by adding inline styles to the HTML. you can further customize the tooltip by modifying the CSS styles.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!DOCTYPE html> <html> <head> <title>CSS Tooltip</title> <style> .tooltip { position: relative; display: inline-block; } .tooltip-content { position: absolute; z-index: 1; background-color: #555; color: #fff; padding: 5px; border-radius: 5px; display: none; } .tooltip:hover .tooltip-content { display: block; } </style> </head> <body> <h1>CSS Tooltip Example</h1> <p>Hover over the text below to see the tooltip:</p> <span class="tooltip">Hover over me <span class="tooltip-content">Welcome to geekscoders.com</span> </span> <p>You can customize the tooltip further by adding your own styles. For example:</p> <span class="tooltip" style="background-color: #ffcc00; color: #333; font-size: 14px; border-radius: 10px;">Hover over me <span class="tooltip-content">Welcome to geekscoders.com</span> </span> </body> </html> |
This will be the result
