adding onMouseover event to textbox

Posted on 2006-05-30
Last Modified: 2008-01-09
I have a validation routine in a form that assigns onMouseOver events to textboxes that don't meet validation rules.  I'm trying to use the tooltip widget from here: .  The syntax for that particular bit of code works fine when it's used hardcoded inline in this format:

<input onMouseOver = "return escape('Please enter a valid number.')" id="txtTest" type="text">

The problem comes when I try to assign the onMouseover event to an input (necessary to be useful for input validation).

Four methods:
1.) document.MyForm.txtTest.setAttribute("onMouseOver","return escape('ID a valid number.')");
2.) document.MyForm.txtTest.attachEvent("onMouseOver","return escape('Attach a valid number.')");
3.) document.MyForm.txtTest.attachEvent("onMouseOver",function(){return escape('Attach a valid number.')});
3.) document.MyForm.txtTest.addEventListener("onMouseOver","return escape(42)",false);

Four results:
1.) Fails silently in IE and FF, which is what I'd expect.  The attribute is set, but the browser isn't watching for the event.  Fine.
2.) Fails in FF (expected; it's an IE-proprietary function).  Fails in IE, claiming a Type mismatch in the line (char 7).
3.) Fails totally silently now.  Not really an improvement.
4.) Fails in IE (expected; it's a FF-proprietary function).  Fails in FF, throwing "uncaught exception: null" with no accompanying line number.  Changing 'false' to 'true' makes no difference.

I just want to be able to programatically assign tooltip-style pop-ups on mouseover; I'm not married to this particular widget.   I don't care whether the final answer involves correcting my technique, correcting my imported tool, or picking another tool entirely.  Any input is appreciated.
Question by:Rakafkaven
    LVL 28

    Expert Comment

    by:Pravin Asar
    document.MyForm.txtTest.onmouseover = function () { window.status = 'Mouse Over Status' ; }
    LVL 28

    Accepted Solution

    Further reading you question about tool tip

    Adding title  attribute will provide you tooltip

    <input id="txtTest" type="text" title="Text Tool tip">

    to assign title via javascript you can use

    document.MyForm.txtTest.setAttribute("title","Text test tool tip");

    LVL 4

    Author Comment

    Well, it's not as fancy as the imported tool, but it has the undeniable advantage of working.  And anything that keeps complexity to a (relative) minimum is probably also a good thing.  Thanks!

    LVL 28

    Expert Comment

    by:Pravin Asar
    Which solution you used, window.status or assigning the title ???

    LVL 4

    Author Comment

    Title.  I should try the status too, just to see how I like it, but it's hard to work up the will now that I have a working solution.
    LVL 28

    Expert Comment

    by:Pravin Asar
    Window.status ,,,, user may not pay attention to status bar and

    As you may know, some times it may not be displayed .. turned off by user

    Here is my version of floating hint,

    <TITLE>My Pop-up title</TITLE>
    <form name="f1">
    <input style="position: absolute;top: 50px; left: 100px;" type="text" id="name" name="name">
    <input style="position: absolute;top: 100px; left: 100px;" type="text" id="email" name="email">
    <span id="msg" style="position: absolute;  border: solid black; display: none;">
    <SCRIPT LANGUAGE="javascript">
    function ShowHelp(fldId, message)
          var msgObj = document.getElementById('msg');
          var fld = document.getElementById(fldId);
  = parseInt (;
 = 10 + parseInt ( + fld.offsetWidth;
 = 'block';
          msgObj.innerHTML = message;

    function HideHelp () {
          document.getElementById('msg').display = 'none';
    }    = function (event) { ShowHelp ('name','Enter name');} =  function () {  HideHelp (); } = function (event) { ShowHelp ('email','Enter email');} =  function () {  HideHelp (); }

    Featured Post

    What Security Threats Are You Missing?

    Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

    Join & Write a Comment

    "That which we persist in doing becomes easier, not that the task itself has become easier, but that our ability to perform it has improved." Ralph Waldo Emerson Introduction: One of the wonderful things about the web is that it makes it s…
    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    755 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now