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

Change php variable from jquery value using ajax (same page) -

How can I fetch data from a web server in an android application? -

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