如何在DataTables网格的Font Awesome图标上实现悬停提示框

嘿，你的HTML结构已经搭得差不多了，只需要加几行CSS就能搞定悬停提示的功能！下面是一步步的实现方案：

1. 微调HTML结构（让样式控制更方便） #

你现有的代码已经包含了图标和提示文本，我建议给每个图标链接加个统一的类，这样后续样式调整更省心：

<td>
  <a asp-action="Edit" asp-route-id="@item.DutchAuctionTenderId" class="dt-icon-link">
    <i class="fa fa-pencil"></i>
    <span class="tooltip-text">Edit Row</span>
  </a> |
  <a asp-action="Details" asp-route-id="@item.DutchAuctionTenderId" class="dt-icon-link">
    <i class="fa fa-list"></i>
    <span class="tooltip-text">Row Details</span>
  </a>
</td>

这里用dt-icon-link作为统一类名，明确是DataTables里的图标链接。

2. 用纯CSS实现悬停提示 #

不需要额外JavaScript，纯CSS就能实现流畅的悬停显示效果，代码如下：

/* 给图标链接设置相对定位，让提示框能相对于它定位 */
.dt-icon-link {
  position: relative;
  display: inline-block;
  margin: 0 10px; /* 给图标之间留点空隙，避免挤在一起 */
  color: #2c3e50; /* 图标默认颜色，可根据你的主题修改 */
  text-decoration: none; /* 去掉链接的下划线 */
}

/* 默认隐藏提示框，设置基础样式 */
.tooltip-text {
  visibility: hidden;
  width: 110px;
  background-color: #2c3e50;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 100; /* 确保提示框在最上层，不会被其他元素遮挡 */
  bottom: 130%; /* 把提示框放在图标上方 */
  left: 50%;
  margin-left: -55px; /* 让提示框居中对齐 */
  opacity: 0;
  transition: opacity 0.2s ease; /* 添加淡入淡出的过渡动画 */
}

/* 鼠标悬停时显示提示框 */
.dt-icon-link:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

/* 可选：给提示框加个小箭头，更直观 */
.tooltip-text::after {
  content: "";
  position: absolute;
  top: 100%; /* 箭头位于提示框底部 */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #2c3e50 transparent transparent transparent;
}

3. DataTables兼容小贴士 #

如果你的DataTables用了分页、滚动加载或者列隐藏这些功能，完全不用担心——这个纯CSS方案和DataTables的动态渲染逻辑不冲突，所有动态生成的图标都能正常显示提示框。

要是想调整提示框的样式，比如背景色、字体大小，直接修改CSS里的对应属性就行，非常灵活。

这样设置后，当鼠标移到图标上时，提示框就会平滑地显示出来，移开后又会隐藏，完美替代原来的文本按钮还增加了交互友好性！

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