如何在Bootstrap 4中实现卡片悬浮时展示包含另一张卡片的tooltip？

该功能完全可以实现，Bootstrap 4原生的Tooltip组件支持插入自定义HTML内容，只需要简单配置即可达到你要的悬浮展示自定义卡片的效果。

具体操作步骤 #

• 引入Tooltip依赖的JS文件
  Bootstrap 4的Tooltip功能依赖jQuery和Popper.js，你需要在已有的CSS引用之后补充以下JS引用：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js" integrity="sha384-+YQ4JLhjyBLPDQt//I+STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>

• 隐藏自定义卡片内容
  把你要放在Tooltip里的自定义卡片代码放在页面任意位置，添加d-none类将其默认隐藏，同时给卡片加唯一ID方便调用，示例：

<!-- 隐藏的Tooltip自定义卡片 -->
<div class="d-none" id="tooltip-card">
  <div class="card" style="max-width:350px">
    <div class="card-body">
      <h4 class="card-title">Python for Data Science and Machine Learning Bootcamp</h4>
      <p class="card-text">
        Learn how to use NumPy, Pandas, Seaborn , Matplotlib , Plotly , Scikit-Learn , Machine Learning,
        Tensorflow , and more!
      <table>
        <tr>
          <td><i class="fas fa-check"></i>
          <td>Use Python for Data Science and Machine Learning</li>
        </tr>
        <tr>
          <td><i class="fas fa-check"></i></td>
          <td>Use Spark for Big Data Analysis</li>
          </td>
        </tr>
        <tr>
          <td><i class="fas fa-check"></i></td>
          <td>Implement Machine Learning Algorithms</li>
          </td>
        </tr>
      </table>
      </p>
      <a href="#" class="btn btn-primary">Add to Cart</a>
    </div>
  </div>
</div>

• 初始化Tooltip
  给你的主卡片外层添加data-toggle="tooltip"属性，之后添加JS代码初始化Tooltip，开启HTML内容解析，指定内容为刚才隐藏的自定义卡片：

$(function () {
  $('[data-toggle="tooltip"]').tooltip({
    html: true, // 允许解析HTML内容
    trigger: 'hover', // 悬浮触发
    placement: 'right', // 展示在主卡片右侧，可根据需求调整为top/bottom/left
    content: function() {
      return $('#tooltip-card').html(); // 读取隐藏卡片的HTML作为Tooltip内容
    },
    boundary: 'window' // 防止Tooltip超出视口被截断
  })
})

• 调整Tooltip默认样式
  默认Tooltip的最大宽度很窄，会挤压自定义卡片的布局，补充以下CSS即可：

/* 调整Tooltip容器宽度，适配自定义卡片 */
.tooltip {
  max-width: unset !important;
}
.tooltip .tooltip-inner {
  background: transparent;
  padding: 0;
  box-shadow: 0 2px 15px rgba(0,0,0,0.15);
}
/* 不需要Tooltip的默认箭头可以隐藏 */
.tooltip .arrow {
  display: none;
}

如果你的页面上有多个主卡片需要对应不同的Tooltip内容，可以给每个主卡片加data-tooltip-id属性绑定对应隐藏卡片的ID，在初始化的时候动态读取对应的内容即可。

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