Tooltip window changing height and width when more text is added

Question

i tried to make this tooltip dynamic with the text (so when there is less text - smaller window) but it didn't work for me. I need this tooltip to change size of itself when more text is added and shrink itself when there is only a few words. Example in Jsfiddle.

PS: I don't like to use JS, but if it's necessary I can live with that.

JsFiddle: https://jsfiddle.net/d4m5hj6f/

.content {
  position: static;
}

.header {
  text-align: center;
  position: relative;
  margin-top: 40px;
}

th, td { 
  border:1px solid black;
  overflow: hidden;
}

th {
  background-color: #eff0f0;
}

td {
  background-color: #eed6b1;
  height: 45px;
}

tr:nth-child(even) td {
  background-color: #FFF1E1;
}

table {
  table-layout: fixed;
  min-width: 2000px;
  border-collapse: collapse;
  width: 100%;
  margin-left: 5px;
}

.DZ {
  text-align: center;
}


tr:hover td {
  background-color: #ccc;
}

tr:nth-child(even) {
  background-color: #e5e5e5;
}

tr td {
  border-right: 1px solid #a5a5a5;
}

.Bezborder {
  border-right: 1px solid black;
}

.ht:hover .tooltip {
  display: block;
}

.tooltip {
  position:absolute;
  display: none;
  background-color: #fafbb8;
  border: 1px solid black;
  border-radius: 4px;
  margin-left: 28px;
  padding: 10px;
  position:absolute;
  z-index: 1000;
  width: 680px;
  height: 50px;
  font-weight: bold;
}

<div class="content">
  <div class="header">
  </div>

  <a name="172016">
    <!--1. riadok H-->
    <table cellspacing="0" cellpadding="0" border="0">
      <tr>
        <th width="50px">C. u.</th>
        <th width="30px">Zobrazit</th>
        <th width="30px">Typ</th>
        <th width="220px">Look here ---></th>
        <th width="650px">hover Under this</th>
        <th width="130px">System</th>
        <th width="100px">Dopad/Symptom</th>
        <th width="100px">Dátum zadania</th>
        <th width="100px">Dátum vzniku</th>
        <th width="100px">Datum Verifikacie</th>
        <th width="80px">Ukoncenie</th>
        <th width="100px">Dátum</th>
      </tr>
      <!--2. riadok D-->
      <tr>
        <td style="text-align:center">100</td>
        <td style="text-align:center">X</td>
        <td style="text-align:center">C </td>
        <td>DOBRIKOVA/DURACKA</td>
        <td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">Tooltip windows need to change with text, more text - larger window, less text = smaller windows.</span></td>	 
        <td>CORAIL/CONSO</td>
        <td></td>
        <td class="DZ">06/07/2016</td>
        <td class="DZ">06/07/2016</td>
        <td class="DZ">06/07/2016</td>
        <td style="text-align:center">OK</td>
        <td class="Bezborder" style="text-align:center">07/07/2016</td>
      </tr>
      <!--3. riadok D-->
      <tr>
        <td style="text-align:center">101</td>
        <td style="text-align:center">X</td>
        <td style="text-align:center">C </td>
        <td>DOBRIKOVA/DURACKOVA</td>
        <td class="ht"> Gefco PC nasa siet CD vs finalne riesenie internet gefco pc CORAIL <span class="tooltip">You see there is a big tooltip window space under this.</span></td>
        <td>CORAIL/CONSO</td>
        <td></td>
        <td class="DZ">06/07/2016</td>
        <td class="DZ">06/07/2016</td>
        <td class="DZ">06/07/2016</td>
        <td style="text-align:center">OK</td>
        <td class="Bezborder" style="text-align:center">07/07/2016</td>
      </tr>
    </table>
  </a>
</div>

Answer 1

Removing the width property from the tooltip css should work. Remove the height too if you want it to adapt when resizing the window.