Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2864
  • Last Modified:

adding onMouseover event to textbox

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: http://www.walterzorn.com/tooltip/tooltip_e.htm .  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.
  • 4
  • 2
1 Solution
Pravin AsarPrincipal Systems EngineerCommented:
document.MyForm.txtTest.onmouseover = function () { window.status = 'Mouse Over Status' ; }
Pravin AsarPrincipal Systems EngineerCommented:
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");

RakafkavenAuthor Commented:
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!

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Pravin AsarPrincipal Systems EngineerCommented:
Which solution you used, window.status or assigning the title ???

RakafkavenAuthor Commented:
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.
Pravin AsarPrincipal Systems EngineerCommented:
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);
      msgObj.style.top  = parseInt (fld.style.top);
      msgObj.style.left = 10 + parseInt (fld.style.left) + fld.offsetWidth;
      msgObj.style.display = 'block';
      msgObj.innerHTML = message;

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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now