CSS实现文本框自适应高度并始终展示在问号按钮上方

本文介绍如何使用CSS代码实现文本框根据内容的高度自适应，并始终展示在问号按钮的上方，不遮盖问号按钮。

原始代码：

.custom-tooltip::after {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
  top: -382%;
  min-width: 0px;
  left: 50%;
  z-index: 999;
  transform: translateX(-10%);
  background-color: #FFF8C3;
  border: 1px solid #B5AC85;
  white-space: inherit;
  color: #000;
  padding: 4px 8px;
  border-radius: 4px;
}

.custom-tooltip:hover::after {
  display: block;
  text-align: left;
}

优化后的代码：

.custom-tooltip::after {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
  top: calc(-100% - 10px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  background-color: #FFF8C3;
  border: 1px solid #B5AC85;
  white-space: pre-wrap;
  color: #000;
  padding: 4px 8px;
  border-radius: 4px;
  min-width: 100px;
  max-width: 200px;
  word-break: break-word;
}

.custom-tooltip:hover::after {
  display: block;
}

解释:

使用calc()函数来计算文本框的位置，top: calc(-100% - 10px);表示文本框的顶部在问号按钮的上方10像素处。
使用min-width和max-width来限制文本框的宽度范围。
使用word-break: break-word;来实现长文本的自动换行。

调整参数:

您可以根据需要调整min-width、max-width和top的数值来适应您的布局和样式。