解决右侧对齐图标长Tooltip文本溢出问题，优先CSS方案

解决方案代码 #

修改后的完整CSS如下：

.container {
  background: darkgrey;
  padding: 20px 20px 50px;
  display: flex;
  width: 400px;
  justify-content: flex-end;
}

.icon {
  font-size: 20px;
  color: white;
  margin-right: 20px;
  position: relative;
  display: flex;
  justify-content: center;
}

.container .icon:hover .tooltip {
    visibility: visible;
}

.tooltip {
    color: #fff;
    position: absolute;
    visibility: hidden;
    font-size: 12px;
    top: 30px;
    min-width: 200px;
    max-width: calc(100% - 40px); /* 限制最大宽度为容器内容宽度 */
    text-align: center;
    left: 50%;
    transform: translateX(-50%); /* 相对于图标居中 */
    white-space: normal; /* 允许文本换行，避免单行溢出 */
    background: rgba(0, 0, 0, 0.8); /* 添加背景提升可读性 */
    padding: 4px 8px;
    border-radius: 4px;
}

核心思路 #

1. 居中对齐+宽度限制：通过left: 50%和transform: translateX(-50%)让Tooltip始终相对于图标居中，同时用max-width: calc(100% - 40px)限制Tooltip最大宽度为容器的内容宽度（减去左右padding），确保不会超出容器边界。
2. 允许文本换行：设置white-space: normal让长文本自动换行，避免单行过长导致溢出。
3. 视觉优化：添加背景色、内边距和圆角，提升Tooltip的可读性和美观度。

可选单行方案（不换行） #

如果需要Tooltip保持单行显示，可将Tooltip样式修改为：

.tooltip {
    color: #fff;
    position: absolute;
    visibility: hidden;
    font-size: 12px;
    top: 30px;
    min-width: 200px;
    white-space: nowrap;
    text-align: center;
    right: 20px; /* 对齐容器右侧padding，确保不溢出 */
    background: rgba(0, 0, 0, 0.8);
    padding: 4px 8px;
    border-radius: 4px;
}

此方案中，Tooltip的右侧会对齐容器的右侧内边距，长文本会向左延伸，完全不会出现右侧溢出问题。

内容的提问来源于stack exchange，提问作者Smithy