I am seeking a solution for dynamically loading data in a table, where I want to wrap long text with ellipsis and display the full content elegantly on hover. Currently utilizing HTML and CSS for this purpose, I have encountered an issue. Even when the text is not large, the styling still appears on mouse hover. Is there a workaround for this problem? Alternatively, would using JavaScript provide a better solution?
For reference, here is a link to the plunker I have created. You can observe in column three that the text is not extensive, there is no ellipsis applied, yet the styling persists on hover. Any assistance on resolving this issue would be greatly appreciated!
https://plnkr.co/edit/cDOxlXRK6QfynVdpCbCT?p=preview
Below is the CSS code being used:
/* Styles go here */
table td.text {
max-width: 10px;
}
table td.text span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
max-width: 100%;
}
table td.text:hover span{
border: 2px solid #000000;
background-color: #ffffff;
padding: 5px;
overflow: visible;
white-space: normal;
height: auto;
/* just added this line */
position:absolute;
}
table td.text:hover span:empty {
display:none;
}
Here is the HTML code:
<table>
<thead>
<tr class="text-center">
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
</tr>
</thead>
<tr>
<td class="text"><span>Lorem Ipsum is simply dummy text...</span></td>
<td class="text"><span>Lorem Ipsum is simply dummy text...</span></td>
<td class="text"><span>Lorem </span></td>
<td class="text"><span></span></td>
</tr>
</table>