如何设置HTML title属性悬浮提示显示在文本的上方

原生HTML的title属性的悬浮提示样式、位置完全由浏览器内核控制，无法直接自定义位置到文本上方，你需要改用自定义tooltip实现，下面给两种适配你Angular项目的方案：

方案1：纯CSS实现无依赖自定义tooltip #

首先修改你的app.component.html模板代码：

<td>
  <span class="custom-tooltip" style="cursor: pointer;">
    {{item.ref}}
    <span class="tooltip-text">{{item.info}}</span>
  </span>
</td>

之后在对应样式文件（如app.component.css）中添加以下样式即可实现顶部悬浮提示：

.custom-tooltip {
  position: relative;
  display: inline-block;
}

/* 悬浮提示框基础样式 */
.custom-tooltip .tooltip-text {
  visibility: hidden;
  width: max-content;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 14px;
  /* 核心定位逻辑：固定在文本上方 */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 提示框底部小箭头 */
.custom-tooltip .tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #333;
}

/* hover触发展示 */
.custom-tooltip:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

方案2：使用Angular组件库内置Tooltip #

如果你的项目已经引入了Angular Material、NG-ZORRO等Angular生态组件库，可以直接调用内置的Tooltip组件，只需配置位置参数为顶部即可，以NG-ZORRO为例：

<td>
  <span nz-tooltip nzTooltipTitle="{{item.info}}" nzTooltipPlacement="top" style="cursor: pointer;">
    {{item.ref}}
  </span>
</td>

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