html - passing what my mouse over is to function - javascript -


i'm new javascript i'm not sure how can this. basically, in website have kind of tooltip, displays when hovering on input boxes. javascript:

function showtip () {     firstnametip.style.display = "inline"; } function hidetip () {     firstnametip.style.display = "none"; } /* link html elements corresponding event function */ function init () {     /* link variables html elements */     firstnametip = document.getelementbyid("firstnametip");     firstname = document.getelementbyid("firstname");     /* assigns functions corresponding events */     firstname.onmouseover = showtip; /* mouse */     firstname.onmouseout = hidetip;     firstname.onfocus = showtip; /* cursor on input field */     firstname.onblur = hidetip; /* cursor moving out */ } /* execute initialisation function once window*/ window.onload = init; 

basically functionality if hover on "firstname", displays firstnametip, , on other things lastname (lastnametip), etc.

simple question i've tried many things , can't figure out. have ideas? thanks.

here's how i'd set up:

function showtip (tipelement) {     return function () {         tipelement.style.display = "inline";     }; }  function hidetip (element, tipelement) {     return function () {         if (document.activeelement !== element) {             tipelement.style.display = "none";         }     }; }  function init() {     inittipevents("firstname", "firstnametip");     inittipevents("lastname", "lastnametip"); }  function inittipevents(elementid, tipid) {     var el = document.getelementbyid(elementid),         tip = document.getelementbyid(tipid),         showhandler = showtip(tip),         hidehandler = hidetip(el, tip);      el.onmouseover = showhandler;     el.onfocus = showhandler;      el.onmouseout = hidehandler;     el.onblur = hidehandler; }  window.onload = init; 

demo: http://jsfiddle.net/lx2cb/

the inittipevents binds necessary events, based on element's id , tip's id, reusing modified showtip , hidetip functions. added check hidetip function make sure tip isn't hidden when mouse leaves input, yet still focused.


Comments

Popular posts from this blog

jquery - How can I dynamically add a browser tab? -

node.js - Getting the socket id,user id pair of a logged in user(s) -

keyboard - C++ GetAsyncKeyState alternative -