In the table on my page, I have implemented a feature using CSS to display additional information in a popup div. This works well when there is limited text, but if there is extensive text in the table, it extends beyond the screen width and becomes difficult to read. Unfortunately, I cannot share the actual content for security reasons, but I have uploaded an obfuscated image of it on Imgur.
https://i.sstatic.net/ghm89.png
/* version 2 */
a.memberinfo {
color: #000;
text-decoration: none;
}
a.memberinfo b {
display: none;
}
a.memberinfo:hover {
border: 0;
position: relative;
z-index: 500;
text-decoration: none;
border-color: #000;
}
a.memberinfo:hover b {
display: block;
position: absolute;
top: 20px;
left: -25px;
padding: 5px;
font-weight: normal;
color: #000;
border: 1px solid #000;
background: #ffffee;
}<a class="memberinfo" href="#">Info
<b>
<em class="outer"></em>
<em class="inner"></em>
<table>
<thead>
<tr>
<th nowrap>
Name
</th>
<th nowrap>
Send
</th>
<th nowrap>
Receive
</th>
<th>
Interval
</th>
<th>
Timeout
</th>
<th>
Type
</th>
</tr>
</thead>
<tbody>
<tr>
<td nowrap>
Name
</td>
<td nowrap>
Send data ...
</td>
<td nowrap>
Receive data
</td>
<td nowrap>
1
</td>
<td nowrap>
1
</td>
<td nowrap>
TTYPE_HTTP
</td>
</tr>
</tbody>
</table>
</b>
</a>Edit, here's a fiddle that shows the problem: http://jsfiddle.net/xp2xfbw6
I want the popup div to expand only up to the edge of the screen without overflowing. If further expansion is necessary, I prefer it to expand towards the left instead of the right. I do not want to wrap the text for readability purposes.
I hope this explanation clarifies the issue. Please let me know if anything is unclear, and I will provide more details.
Thank you for your help!