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.
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 */
}
