Bootstrap 4实现按钮鼠标悬停弹出Popover的问题求助

首先，咱们先梳理下你遇到的核心问题：Bootstrap 4的popover没触发，还有需要根据JSON状态动态绑定popover文本。这里有几个关键问题和对应的解决方案：

1. 必须加载正确的依赖顺序 #

Bootstrap 4的popover依赖jQuery和Popper.js，而且加载顺序不能乱，这是很多人踩坑的点：

<!-- 先加载jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 然后是Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<!-- 最后加载Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>

如果缺了Popper.js，popover根本不会工作，这是Bootstrap 4的硬性要求。

2. 修正HTML中的语法错误 #

你的代码里data- trigger="hover"多了个空格，应该写成data-trigger="hover"，这个小错误会直接导致触发事件不生效。另外，我们需要把状态文本动态绑定到popover，比如用data-content传入对应状态，或者在JS里动态获取。

3. 完整的可运行示例代码 #

结合你的需求（绿色RUNNING/红色TERMINATED按钮，悬停显示状态文本），这里是完整的实现：

CSS部分 #

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}
.btn-success { /* 对应RUNNING状态的绿色按钮 */
  background-color: #28a745;
  border-color: #28a745;
}
.btn-danger { /* 对应TERMINATED状态的红色按钮 */
  background-color: #dc3545;
  border-color: #dc3545;
}

HTML部分 #

假设你的模板引擎（比如Go模板）已经把Status变量传入，statusButtonClass过滤器会根据状态返回btn-success或btn-danger：

<!-- RUNNING状态按钮示例 -->
<button type="button" class="btn {{.Status | statusButtonClass}} btn-circle" 
        data-toggle="popover" 
        data-placement="right" 
        data-content="{{.Status}}" 
        data-trigger="hover">
  <i class="glyphicon glyphicon-ok"></i>
</button>

<!-- TERMINATED状态按钮示例（手动模拟） -->
<button type="button" class="btn btn-danger btn-circle" 
        data-toggle="popover" 
        data-placement="right" 
        data-content="TERMINATED" 
        data-trigger="hover">
  <i class="glyphicon glyphicon-remove"></i>
</button>

JS初始化部分 #

$(document).ready(function(){
  // 初始化所有popover
  $('[data-toggle="popover"]').popover({
    placement: 'right',
    trigger: 'hover', // 确保触发方式正确
    html: false // 如果不需要HTML内容，保持false即可
  });

  // 可选：如果按钮是动态生成的（比如AJAX加载），用事件委托
  // $(document).on('mouseenter', '[data-toggle="popover"]', function () {
  //   $(this).popover('show');
  // }).on('mouseleave', '[data-toggle="popover"]', function () {
  //   $(this).popover('hide');
  // });
});

4. 关键注意事项 #

• 如果你的按钮是动态生成的（比如通过AJAX加载），直接用$(document).ready()初始化可能无效，这时候需要用上面对应的事件委托代码。
• 确保statusButtonClass过滤器正确返回对应的按钮类：RUNNING返回btn-success，TERMINATED返回btn-danger。
• 测试时可以先手动写死状态（比如上面的TERMINATED按钮），确认popover生效后再对接JSON数据。

这样调整后，鼠标悬停在按钮上应该就能正常弹出对应的状态文本了，和你期望的效果一致。

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