A better way to use onmouseover, onmouseleave

Question

How I can better make an use of onmouseover, onmouseleave and onmousemove in this JSFiddle file? http://jsfiddle.net/Insane96MCP/xznn7g3d/5/

You can see that I have:

document.getElementById("button1").onmouseover = function(){
    showToolTip(/*...*/);
}
document.getElementById("button1").onmouseleave = function(){
    hideTooltip(/*...*/);
}
document.getElementById("button1").onmousemove = function(){
    showTooltip(/*...*/);
}
document.getElementById("button2").onmouseover = function(){
    showTooltip(/*...*/);
}
//And so on

There's a better way to do this, instead of stacking them in succession, creating a long javascript?

Answer 1

Use an array and for loop like

var ids = ['time', 'start', 'pause'];
for (var i = 0; i < ids.length; i++) {
    document.getElementById(ids[i]).onmouseover = function(e) {
        showTooltip(Strings.timeTooltip, e);
    };

    document.getElementById(ids[i]).onmouseleave = function(e) {
        hideTooltip();
    };

    document.getElementById(ids[i]).onmousemove = function(e) {
        showTooltip(Strings.timeTooltip, e);
    };
}

DEMO