javascript - 添加更多文本时工具提示窗口更改高度和宽度

Question

我试图让这个工具提示与文本一起动态化(所以当文本较少时 - 较小的窗口)但它对我不起作用。我需要这个工具提示来在添加更多文本时更改自身的大小，并在只有几个单词时缩小自身。 Jsfiddle 中的示例。

PS:我不喜欢使用 JS，但如果有必要，我可以接受它。

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

从工具提示 css 中删除 width 属性应该可以。如果您希望在调整窗口大小时调整高度，也可以移除高度。