Abhishek Anand Abhishek Anand - 2 months ago 13
Javascript Question

i had made a tooltip via javascript, but it not working perfectly, could you guys help me out

Code :

var tooltip = document.createElement('div');
var value = document.getElementsByClassName('tooltips');
var tooltip_val = document.getElementsByClassName('tooltips').item(attr).getAttribute('title');
var attr;
for (attr = 0; attr < value.length; attr ++){
value.item(attr).getAttribute('title');
}

document.getElementsByClassName('tooltips').item('attr').onmouseover = function(){ mouseOver() };
document.getElementsByClassName('tooltips').item('attr').onmouseout = function(){ mouseOut() };

function mouseOver(){
document.body.appendChild(tooltip);
tooltip.setAttribute('class', 'tooltip');
tooltip.innerHTML = tooltip_val;
document.getElementsByClassName('tooltips').item('attr').removeAttribute('title');
}

function mouseOut(){
document.body.removeChild(tooltip);
document.getElementsByClassName('tooltips').item('attr').setAttribute('title', tooltip_val);
}

Answer

EDIT

I made several changes in your code, it works now - but you'll still need to position the tooltip

var tooltip = document.createElement('div');
var objs = document.getElementsByClassName('tooltips');
for(var i = 0; i < objs.length ; i++){
   objs[i].onmouseover = mouseOver;
   objs[i].onmouseout = mouseOut;
};  

function mouseOver(e){
   document.body.appendChild(tooltip);
   tooltip.setAttribute('class', 'tooltip');
   var tooltip_val = e.target.getAttribute('title');
   tooltip.innerHTML = tooltip_val;
   e.target.removeAttribute('title');
}

function mouseOut(e){
   var tooltip_val = tooltip.innerHTML;
   document.body.removeChild(tooltip);
   e.target.setAttribute('title', tooltip_val);
}