Mythri
09-24-2012, 09:30 AM
Hi,
I have developed an e-commerce site. For user form input box, i want to put a question mark icon as help tool. When user takes mouse on that icon it should display the help text. I am not getting how to do it. Please someone help me in doing this
WolfShade
09-24-2012, 01:36 PM
It can be done easily with a JS library like jQuery (http://jquery.com/) or qTip2 (http://craigsworks.com/projects/qtip2/).
UPDATE: There's also overLib (http://www.bosrup.com/web/overlib/).
vwphillips
09-24-2012, 02:10 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
.theclassname {
position:absolute;z-Index:101;left:40px;top:0px;width:200px;height:200px;background-Color:#FFFF66;border:solid red 1px;
}
</style>
<script type="text/javascript">
function Help(obj,ud){
if (!obj.help){
var div=document.createElement('DIV');
div.className=obj.rev;
div.innerHTML=obj.rel;
document.body.appendChild(div);
obj.help=[div,div.offsetLeft,div.offsetTop];
}
var xy=[0,0],o=obj;
while(o){
xy[0]+=o.offsetLeft;
xy[1]+=o.offsetTop;
o=o.offsetParent;
}
obj.help[0].style.visibility=ud?'visible':'hidden';
obj.help[0].style.left=xy[0]+obj.help[1]+'px';
obj.help[0].style.top=xy[1]+obj.help[2]+'px';
}
</script>
</head>
<body>
<center>
<a rel="the help 0 html" rev="theclassname" onmouseover="Help(this,true);" onmouseout="Help(this,false);"><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="40" height="40" /></a>
<a rel="the help 1 html" rev="theclassname" onmouseover="Help(this,true);" onmouseout="Help(this,false);"><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="40" height="40" /></a>
<br /><br /><br />
<a rel="the help 2 html" rev="theclassname" onmouseover="Help(this,true);" onmouseout="Help(this,false);"><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="40" height="40" /></a>
</center>
</body>
</html>
xelawho
09-24-2012, 02:26 PM
keeping it simple...
<style type="text/css">
img{height:30px;
width:30px}
</style>
</head>
<body>
<img src="http://www.infendo.com/wp-content/uploads/2011/05/question-mark.jpg" title="I am the help"/><input type="text"/>
</body>