Content Goes out of tooltip only in Chrome, works well in IE11

Question

I am a newbie to CSS world and I am trying to add a block-level(div) element inside anchor tag :hover pseudo-class popup. The div element contains a table. The Table and its Cell size should be dynamic(min and max-width may be allowed). I somehow managed to create below snippet that is working fine in IE11, but the text wrapping is not working as expected in chrome. I have tried overflow wrap, word-wrap, word break with break-word and break-all options, but it's working only in IE11, not in Chrome.

Expectation: Content should be wrapped, but it's not working as expected in chrome but 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>

if it works well in IE11 but not in other browsers - you've done it wrong — Bravo, Nov 15 '19 at 13:22
@Andreas i assume the javascript is there because he is creating the HTML elements with it.. — Jonny, Nov 15 '19 at 13:25
@Andreas you are correct i was just pointing out i think thats why he posted the js — Jonny, Nov 15 '19 at 13:30
`# value` is incorrect CSS, and you can't have whitespace in HTML tags between the < and the element name. Run your source through a validator. — Mr Lister, Nov 15 '19 at 14:27
@Andreas As you pointed out, now updated my code with only sample HTML code. Could you please provide any solution? — Saravanan, Nov 15 '19 at 15:11
@Saravanan, your code snippet itself have an answer for your question, `//` is not a comment element in CSS, please prefer `/* */` as comment element — Prasanth Rajendran, Nov 15 '19 at 19:06

Prasanth Rajendran · Accepted Answer · 2019-11-15T19:30:02.750

@Saravanan, your code snippet itself has an answer to the question. I have just added a valid CSS comment /* */ syntax instead of // and commented out few unwanted CSS properties in .value as below. That's It!!! it will work in IE11 and chrome.

      word-break: break-all;
      overflow-wrap: break-word;
      word-wrap: break-word;
      white-space: pre;

.header {
  color: #1aa3ff;
/*   //width: 30%; */
  border: 1px solid #cccccc;
/*   //min-width: 50px; */
}
a{
  display: block;
}
.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: block;
}

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>

Works like a charm! Thanks for your help. – Saravanan Nov 15 '19 at 20:02 — Saravanan, Nov 15 '19 at 20:02

score 0 · Answer 2 · answered Nov 15 '19 at 16:41

The rule that is causing the problem is white-space: pre

pre
Sequences of white space are preserved. Lines are only broken at newline characters in the source and at <br> elements.

Just remove it.

Another problem are your "comments". There's no // ... comment. The only valid syntax is: /* ... */
(MDN | Comments - CSS)

.header {
  /* width: 30%; */
  color: #1aa3ff;
  border: 1px solid #cccccc;
  min-width: 50px;
}

.value {
  /* width: 70%; */
  border: 1px solid #cccccc;
  padding: 5px;
  min-width: 100px;
  max-width: 250px; /* undefined behavior -> https://stackoverflow.com/questions/8465385/how-can-i-set-the-max-width-of-a-table-cell-using-percentages*/
  word-break: break-all;
  word-wrap: break-word;
}

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;
  margin-left: auto;
  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>

Content Goes out of tooltip only in Chrome, works well in IE11

2 Answers2