Show Hidden Text in DIV on Hover

Question

The desired effect is to have hidden text within a table cell show the full text across the cell when user hovers the mouse cursor over the text. See link to problem diagram to see what I mean. The "solution" denotes the desired effect while "problem" denotes what the code is currently doing. Much appreciated for the assistance.

var jobSourceID = 'jobSource' + jobIndex;
jobSource.innerHTML = '<div id="' + jobSourceID + '">' + jobSourceValue + '</div>';
document.getElementById(jobSourceID).style.marginLeft = '3px';
document.getElementById(jobSourceID).style.maxWidth = '55px';
document.getElementById(jobSourceID).style.overflow = 'hidden';
document.getElementById(jobSourceID).style.textOverflow = 'ellipsis';
document.getElementById(jobSourceID).style.whiteSpace = 'nowrap';
document.getElementById(jobSourceID).addEventListener('mouseover', function () {
    document.getElementById(jobSourceID).style.overflow = 'visible';
    document.getElementById(jobSourceID).style.backgroundColor = '#555555';
});
document.getElementById(jobSourceID).addEventListener('mouseout', function () {
    document.getElementById(jobSourceID).style.overflow = 'hidden';
    document.getElementById(jobSourceID).style.backgroundColor = '';
});

Answer 1

You can do it like this:

 *{ padding:0; margin: 0; } td{ overflow:hidden; } td div{ background-color: #ccc; width:50px; } td:hover{ overflow: inherit } td:hover div{ width:100%; } 

 <table> <tr> <td> <div> asadgshfdadgfhgdgjgsfgfadsfahgdafgerre </div> </td> </tr> </table> 

Answer 2

You can set 'jobSourceID' width as auto on mouseover function.

document.getElementById(jobSourceID).style.width = "auto";

Answer 3

If your problem ist just the styling of the background, you can style a SPAN inside the DIV and hide this instead of only the text.

document.body.innerHTML = '<div id="' + jobSourceID + '"><span>' + jobSourceValue + '<span></div>';
document.getElementById(jobSourceID).style.marginLeft = '3px';
document.getElementById(jobSourceID).style.maxWidth = '55px';
document.getElementById(jobSourceID).style.overflow = 'hidden';
document.getElementById(jobSourceID).style.textOverflow = 'ellipsis';
document.getElementById(jobSourceID).style.whiteSpace = 'nowrap';
document.getElementById(jobSourceID).addEventListener('mouseover', function () {
    document.getElementById(jobSourceID).style.overflow = 'visible';
    document.getElementById(jobSourceID).children[0].style.backgroundColor = '#555555';
});
document.getElementById(jobSourceID).addEventListener('mouseout', function () {
    document.getElementById(jobSourceID).style.overflow = 'hidden';
    document.getElementById(jobSourceID).children[0].style.backgroundColor = '';
});

Answer 4

After trying all the suggested solutions posted, I see that none of them solves the problem I described in my post diagram. However, I did some more searching and after googling "html tooltips" I found some good articles explaining the concept such that tooltips was the solution I needed. So I managed to get this problem fixed on my own to my satisfaction.