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).
The Advantages of Pure CSS Tooltips
No JavaScript Dependency Pure CSS tooltips eliminate the need for JavaScript, reducing the complexity of your codebase. Since they rely solely on HTML and CSS, they load faster and execute without waiting for JavaScript to parse. This is particularly beneficial for performance-critical applications where minimizing script execution is a priority.
Improved Performance JavaScript-based tooltips require event listeners and additional processing, which can slow down page rendering. CSS, on the other hand, is handled by the browser’s rendering engine, making tooltips appear instantly. This results in a smoother user experience, especially on low-powered devices.
Simplified Maintenance Maintaining JavaScript tooltips often involves managing dependencies, updating libraries, and ensuring compatibility with other scripts. Pure CSS tooltips are self-contained, reducing the risk of conflicts and making updates straightforward.
Better Accessibility When implemented correctly, CSS tooltips can be just as accessible as JavaScript-based ones. Using semantic HTML (such as `aria-label` or `title` attributes) ensures screen readers interpret tooltips properly. Additionally, CSS tooltips can be made keyboard-accessible with proper focus states.
Cross-Browser Compatibility Modern CSS properties like `::before`, `::after`, and `:hover` are well-supported across browsers. Unlike JavaScript, which may require polyfills for older browsers, CSS tooltips work consistently with minimal fallback requirements.
Lightweight and Fast Loading Since no external libraries are needed, CSS-only tooltips contribute to smaller file sizes. This is crucial for optimizing page load times, especially on mobile networks where bandwidth is limited.
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.