html - CSSツールチップは伸びず、固定幅しか持てません

Question

内容が非常に長いものから非常に短いものまでさまざまなツールチップがあります。3語分のコンテンツと巨大なツールチップは必要ありませんが、20語も必要ではなく、すべてを複数の行に詰め込んでいます。この現在の設定では、関係なく最小幅でスタックしたままになります。

CSS：

.tooltip {
  outline: none; position: relative;
  min-width: 75px; max-width: 255px;
}

.tooltip .tool-content {
  opacity: 0; visibility: hidden;
  position: absolute;
}

.tooltip:hover .tool-content {
  background: #999; border: 1px solid #555; color: #000000;

  /* general styling */
  position: absolute; left: 1.3em; top: 2.6em; z-index: 99;
  visibility: visible; opacity: 1;
}

HTML：

<div class='tooltip'>
(content to hover)
    <span class='tool-content'>
        (tooltip content)
    </span>
</div>

私を悩ませているのは、私がポジションを外すことができるということです：相対的で、それは意図したとおりに機能します！それでも回避策は見つかりません。CSSホバーを使用するには、相対的な位置付けが重要です（またはそうであるように見えますか？）。

Answer 1

.tooltip {
  outline: none;
  position: relative;
  width: 75px;
  min-width: 75px;
  max-width: 255px;
}

.tooltip .tool-content {
  margin:0;
  padding:0;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  width:100%;
  height:100%;
}

それを削除して、ブロック レベルの要素 ( styleなど)spanに置き換えることができます。divdisplay:block

Answer 2

必要に応じて 1 行のツールチップで十分な場合は
white-space: pre、.tool-content.