CSS 技巧：如何将文本框底部保持在问号按钮上方

如何将文本框底部始终展示在问号按钮的上方一定的高度，不遮盖问号按钮？

您可以通过调整 .custom-tooltip::after 中的 top 属性来控制文本框底部与问号按钮之间的距离。请尝试将 top 值改为负数，以使文本框底部保持在问号按钮的上方一定的高度。例如：

.custom-tooltip::after {
  content: attr(data-tooltip);
  display: none;
  position: absolute;
  top: -100%; /* 调整这个值来控制高度 */
  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;
}

通过将 top 值设置为负数，文本框的底部将保持在问号按钮的上方指定的高度，从而避免遮盖问号按钮。根据您的需求，您可以根据实际情况调整 top 值的大小。

示例代码：

.custom-tooltip::after {
  content: 'attr(data-tooltip)';
  display: none;
  position: absolute;
  top: -100%; /* 调整这个值来控制高度 */
  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;
}