For showing some message or help content to the user generally we need some hidden message through some link where user will to see or click to get help.For that we nee to nice look and feel.From that one of is tooltip which will be easy for user and as well as for server.Means no need to go for other link or any other page or location or any pop up we just hover the crosser and get our information or help by “what is this ? “.So tolltip can be done by jss or also css But I am going to show you how will show you the tooltip through css which I say “Simple tooltip by css”.Also I guess it very easy no need to add any plugin nor any js file just add the class and use the class for your tooltip.its very simple.So it is called as Simple tooltip by css.Nice look with easy setup no need to add any plugin nor any js file just add the class and use the class for your tooltip.
Here is my full html file from where you can just copy this html file and save in your system as cssToolTip.html file and see the result and feel how easy it(Simple tooltip by css).
<!DOCTYPE html>
<html>
<head>
<title>Simple css tooltip example</title>
<style type="text/css">
.tooltip_main{position: absolute;top: 50%;left: 50%;}
.help:hover div.tooltip, .help:active div.tooltip {display: block;}
.help{position: relative;text-align: center;}
.help .tooltip{
background: none repeat scroll 0 0 #e0efe3;
border: 2px solid #a8b8ab;
border-radius: 5px;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
color: #444;
display: none;
font-size: 12px;
font-weight: normal;
left: 72px;
padding: 0 15px 0 20px;
position: absolute;
text-align: left;
top: -12px;
white-space: nowrap;
z-index: 500;
}
.tooltip_name{margin-bottom: 25px;}
</style>
</head>
<body>
<div class="tooltip_main">
<div class="tooltip_name">Simple css tooltip example</div>
<div class="help">Moreinfo
<div class="tooltip">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
</body>
</html>
Live Demo
If you have simple knowledge of css then you can easily understand how Simple tooltip work.
<div class="tooltip_main">
<div class="tooltip_name">Simple css tooltip example</div>
<div class="help">Moreinfo
<div class="tooltip">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
</div>
</div>
The above part is my html div part and below part is my css part. I have put here as inline you can use all the css as separate file and link to that file for your example.
.tooltip_main{position: absolute;top: 50%;left: 50%;}
.help:hover div.tooltip, .help:active div.tooltip {display: block;}
.help{position: relative;text-align: center;}
.help .tooltip{
background: none repeat scroll 0 0 #e0efe3;
border: 2px solid #a8b8ab;
border-radius: 5px;
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
color: #444;
display: none;
font-size: 12px;
font-weight: normal;
left: 72px;
padding: 0 15px 0 20px;
position: absolute;
text-align: left;
top: -12px;
white-space: nowrap;
z-index: 500;
}
.tooltip_name{margin-bottom: 25px;}
Here you can see no extra links nor any plugin are added as I called it is so simple.So use it if you think you can get benefit for website.