Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2011
    Posts
    92
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Onmouse over text display as help

    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

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    It can be done easily with a JS library like jQuery or qTip2.

    UPDATE: There's also overLib.
    Last edited by WolfShade; 09-24-2012 at 02:07 PM.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!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>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    keeping it simple...
    Code:
    <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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •