为fa fa-info-circle图标添加鼠标悬停动态费用明细展示方案咨询

这里有几个实用的方案，能帮你实现悬停图标展示动态费用明细的需求，你可以根据项目技术栈和样式偏好来选择：

这个方案最省心，不需要额外CSS，直接给图标元素动态设置title属性，里面包含格式化后的费用明细。

代码示例： #

<!-- 图标元素 -->
<i class="fa fa-info-circle" id="feeInfoIcon"></i>

<script>
// 假设你的费用数据是计算好的变量（可以从后端接口获取或前端计算）
const feeDetails = {
  baseFare: 100,
  bookingFee: 50,
  cateringFee: 20,
  totalFare: 170
};

// 格式化明细文本，用\n实现换行（多数浏览器支持）
const tooltipText = `基础票价 - ${feeDetails.baseFare}\n预订费 - ${feeDetails.bookingFee}\n餐饮费 - ${feeDetails.cateringFee}\n总票价 - ${feeDetails.totalFare}`;

// 给图标绑定title属性
document.getElementById('feeInfoIcon').title = tooltipText;
</script>

优点：零额外CSS，代码量极少，浏览器原生支持，兼容性拉满。
缺点：样式无法自定义，只能用浏览器默认的tooltip样式，排版灵活性有限。

如果需要和项目UI风格统一，自定义tooltip是更好的选择。用CSS控制弹窗的显示/隐藏，JS动态填充数据，能实现更丰富的视觉效果。

代码示例： #

<!-- 图标 + 自定义弹窗容器 -->
<div class="fee-info-wrapper">
  <i class="fa fa-info-circle"></i>
  <!-- 弹窗默认隐藏 -->
  <div class="fee-tooltip" id="feeTooltip">
    <ul>
      <li>基础票价 - <span id="baseFare"></span></li>
      <li>预订费 - <span id="bookingFee"></span></li>
      <li>餐饮费 - <span id="cateringFee"></span></li>
      <li><strong>总票价 - <span id="totalFare"></span></strong></li>
    </ul>
  </div>
</div>

<style>
.fee-info-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.fee-tooltip {
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #2c3e50;
  color: #fff;
  padding: 12px;
  border-radius: 6px;
  font-size: 14px;
  width: 200px;
  display: none; /* 默认隐藏 */
  z-index: 999;
}

/* 给弹窗加个三角箭头，更美观 */
.fee-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: #2c3e50;
}

/* 鼠标悬停图标时显示弹窗 */
.fee-info-wrapper:hover .fee-tooltip {
  display: block;
}
</style>

<script>
// 费用数据
const feeDetails = {
  baseFare: 100,
  bookingFee: 50,
  cateringFee: 20,
  totalFare: 170
};

// 动态填充每个费用项的数值
document.getElementById('baseFare').textContent = feeDetails.baseFare;
document.getElementById('bookingFee').textContent = feeDetails.bookingFee;
document.getElementById('cateringFee').textContent = feeDetails.cateringFee;
document.getElementById('totalFare').textContent = feeDetails.totalFare;
</script>

优点：样式完全自定义，可以匹配项目设计，支持复杂布局（比如加粗总票价）。
缺点：需要写少量CSS，但代码逻辑清晰，维护成本低。

如果你的项目已经引入了Bootstrap，直接用它的Tooltip组件就能快速实现，自带美观的样式和流畅的交互，不用自己写太多样式代码。

代码示例： #

<!-- 图标元素 -->
<i class="fa fa-info-circle" data-bs-toggle="tooltip" data-bs-html="true" id="bootstrapFeeIcon"></i>

<!-- 确保已引入Bootstrap JS -->
<script src="bootstrap.bundle.min.js"></script>
<script>
const feeDetails = {
  baseFare: 100,
  bookingFee: 50,
  cateringFee: 20,
  totalFare: 170
};

// 格式化HTML内容，支持换行和自定义样式
const tooltipHtml = `
基础票价 - ${feeDetails.baseFare}<br>
预订费 - ${feeDetails.bookingFee}<br>
餐饮费 - ${feeDetails.cateringFee}<br>
<strong>总票价 - ${feeDetails.totalFare}</strong>
`;

// 初始化Bootstrap Tooltip
const tooltip = new bootstrap.Tooltip(document.getElementById('bootstrapFeeIcon'), {
  title: tooltipHtml,
  placement: 'bottom' // 可选：top/bottom/left/right，控制弹窗位置
});
</script>

优点：Bootstrap自带样式，无需手写CSS，支持HTML内容，交互流畅。
缺点：依赖Bootstrap环境，如果项目没引入的话，会增加额外依赖。

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