As a newcomer to the CSS world, I am experimenting with adding a block-level element (div) inside an anchor tag's :hover pseudo-class popup. The div element contains a table that needs to have dynamic sizing for both the table itself and its cells (with minimum and maximum width parameters). While I've managed to create a snippet that works correctly in IE11, I'm facing issues with text wrapping in Chrome. I've tried various options like overflow wrap, word-wrap, word break with break-word and break-all settings, but they only seem to work in IE11, not in Chrome.
Expectation: Content should be wrapped correctly in all browsers, but it's currently only working as expected in IE11
.header {
color: #1aa3ff;
//width: 30%;
border: 1px solid #cccccc;
min-width: 50px;
}
.value {
//width: 70%;
border: 1px solid #cccccc;
padding: 5px;
min-width: 100px;
max-width: 250px;
word-break: break-all;
overflow-wrap: break-word;
word-wrap: break-word;
white-space: pre;
}
a.System {
position: relative;
display: inline;
}
a.System .tooltiptext {
position: absolute;
width: auto;
display: inline-block;
color: red;
background: #737373;
border: 2px solid #000000;
text-align: left;
visibility: hidden;
border-radius: 6px;
z-index: 1;
//left: 80%;
margin-left: auto;
//padding: 5px;
top: 50%;
transform: translateY(-50%);
}
a.System .tooltiptext:before {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -12px;
width: 0;
height: 0;
border-right: 12px solid #000000;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
}
a.System .tooltiptext:after {
content: '';
position: absolute;
top: 50%;
right: 100%;
margin-top: -8px;
width: 0;
height: 0;
border-right: 8px solid #737373;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
}
.System:hover .tooltiptext {
visibility: visible;
}<h2>Right Tooltip w/ Left Arrow</h2>
<a class="System">Hover over me
<div class="tooltiptext">
<table>
<tr>
<td class="header">Name</td>
<td class="value">Sar</td>
</tr>
<tr>
<td class="header">Group</td>
<td class="value">Group Name1 <br>Group Name 2 Group Name 2 Group Name 2</td>
</tr>
</table>
</div>
</a>