There are several ways to design ToolTip. You can design a tooltip using JavaScript or JQuery or CSS or BootStrap. Compare to Client Script ToolTip pure CSS based tooltip renders better performance. In the below demo I created a ToolTip using pure CSS classes. This is Cross Browser friendly and easy to customize.
“addtooltip” class represents styles for HTML page and mouse over area. Class Tooltip is responsible for the look and feel of ToolTip popup div. Using tooptip:before maintaining mouse cursor type during mouse movement from link to tooltip window. Similarly, using tooltip:after drawing Triangle to the bottom of tooltip rectangle.
Introduction to Tooltips
Tooltips are small, contextual pop-up boxes that provide additional information when a user hovers over or focuses on an element. They enhance user experience by offering concise explanations, definitions, or supplementary details without cluttering the interface. Traditionally, tooltips were implemented using JavaScript, but modern CSS techniques allow for pure CSS-based solutions that are lightweight and performant.
Why Use Pure CSS Tooltips?
Pure CSS tooltips eliminate the need for JavaScript, reducing page load time and improving performance. They are simpler to implement, easier to maintain, and work seamlessly across different browsers when properly structured. Additionally, CSS tooltips degrade gracefully on browsers that do not support advanced CSS features.
Basic Structure of a CSS Tooltip
A pure CSS tooltip consists of two main components: 1. Trigger Element: The element (e.g., button, link, or icon) that activates the tooltip on hover or focus. 2. Tooltip Content: The hidden text or element that becomes visible when the trigger is activated.
In HTML I am with 2 div’s. First Div is addtooltip which contains tooltip div as a child. This Tooltip is based on pure CSS to run this you don’t required any plugin like JQuery or AngularJS.
Example.htm
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>ToolTip using pure CSS</title> <link rel="stylesheet" src="toolTip.css" /> </head> <body> <div> <div class="addtooltip"> This is a Demo ToopTip. <div class="tooltip">I am a tooltip!</div> </div> </div> </body> </html>
toolTip.css
.addtooltip {
background: #ddd;
cursor: pointer; /* Cursor icon to Hand Symbol */
font-size: 30px;
padding: 15px 20px;
margin: 100px 75px 10px 100px;
position: relative;
text-align: center;
width: 210px;
-webkit-transform: translateZ(0); /* Google Chrome Flicker Fix */
-webkit-font-smoothing: antialiased; /* Google Chrome Text Rendering Fix */
}
.addtooltip .tooltip {
background: #9ed3f3; /* Background Color of ToolTip rectangle */
bottom: 100%;
color: #0000FF; /* ToolTip Text Color */
display: block;
left: -25px;
opacity: 0;
padding: 20px;
pointer-events: none;
position: absolute;
width: 100%;
margin-bottom: 15px;
transition: all .25s ease-out;
-webkit-transition: all .25s ease-out; /* Fixing Transition issue in Google Chrome */
-moz-transition: all .25s ease-out; /* Fixing Transition issue in FireFox */
-ms-transition: all .25s ease-out; /* Fixing Transition issue in Safari */
-o-transition: all .25s ease-out; /* Fixing Transition issue in Opera */
transform: translateY(10px);
-webkit-transform: translateY(10px); /* Fixing Transform issue in Google Chrome */
-moz-transform: translateY(10px); /* Fixing Transform issue in FireFox */
-ms-transform: translateY(10px); /* Fixing Transform issue in Safari */
-o-transform: translateY(10px); /* Fixing Transform issue in Opera */
box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
-webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); /* Fixing box-shadow issue in Google Chrome */
-moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); /* Fixing box-shadow issue in FireFox */
-ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); /* Fixing box-shadow issue in Safari */
-o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); /* Fixing box-shadow issue in Opera */
}
/* While moving your Mouse Cursor to ToolTip this will keep Continuity */
.addtooltip .tooltip:before {
bottom: -20px;
content: " ";
display: block;
height: 20px;
left: 0;
position: absolute;
width: 100%;
}
/* CSS Triangles below ToolTip Rectangle */
.addtooltip .tooltip:after {
border-left: solid transparent 12px;
border-right: solid transparent 12px;
border-top: solid #9ed3f3 12px;
bottom: -12px;
content: " ";
height: 0;
left: 50%;
margin-left: -13px;
position: absolute;
width: 0;
}
.addtooltip:hover .tooltip {
opacity: 1;
pointer-events: auto;
transform: translateY(0px);
-webkit-transform: translateY(0px); /* Fixing Transform issue in Google Chrome */
-moz-transform: translateY(0px); /* Fixing Transform issue in FireFox */
-ms-transform: translateY(0px); /* Fixing Transform issue in Safari */
-o-transform: translateY(0px); /* Fixing Transform issue in Opera */
}
Common Pitfalls and Solutions
1. Z-Index Issues: Ensure tooltips appear above other elements by setting a high `z-index`.
2. Responsiveness: Use relative units (e.g., `em`, `rem`) for tooltip sizing.
3. Touch Devices: Provide fallbacks for devices without hover support (e.g., tap-to-reveal).
Advanced Techniques
1. Custom Shapes: Use `::before` and `::after` pseudo-elements for arrows or unique designs.
2. Dynamic Content: Combine with CSS variables for reusable tooltip styles.
3. Dark/Light Mode: Adapt tooltip colors using `prefers-color-scheme`.
Conclusion
Pure CSS tooltips are a lightweight, efficient way to enhance user interaction without relying on JavaScript. By leveraging CSS positioning, transitions, and accessibility best practices, developers can create responsive, cross-browser tooltips that improve usability across all devices. With careful attention to design and compatibility, these tooltips provide a seamless experience for users while maintaining clean, maintainable code.
