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.

Problem Diagram

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 = '';
});

Hi @jmine83, Did you take a look at https://stackoverflow.com/questions/34833815/showing-truncated-text-on-hover-using-css-ellipsis-overlaps-text-below-it ? — S Raghav, Mar 19 '18 at 07:43
Please supply html. What is jobSource? (`jobSource.innerHTML`). — wazz, Mar 19 '18 at 07:47

aMJay · Answer 1 · 2018-03-19T07:57:24.527

0

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>

edited Mar 19 '18 at 07:57

answered Mar 19 '18 at 07:49

aMJay

2,215
6
22
34

score 0 · Answer 2 · answered Mar 19 '18 at 07:51

0

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

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

answered Mar 19 '18 at 07:51

Dhaval Jagodana

19
3

score 0 · Answer 3 · answered Mar 19 '18 at 07:53

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 = '';
});

Sorry but I tried your proposed code additions which doesn't do anything different than what my original code was doing. The desired effect is such that on hover, the text "and" it's background color cross over the table cell border. The problem, as my diagram shows, is that the background color is not crossing the table cell border. — , Mar 20 '18 at 16:47

score 0 · Accepted Answer · answered Mar 24 '18 at 20:18

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.

Show Hidden Text in DIV on Hover

4 Answers4