Bootstrap Tooltip闪烁、不关闭、重复项无响应问题求助

问题列表 #

• 闪烁：缓慢悬停图片时，tooltip会闪烁/重复渲染2-3次，疑似与给图片添加的class="me-1"（增加margin-right）有关。
• 鼠标移出不关闭：快速悬停所有图片后，即使鼠标已离开，tooltip仍保持打开状态。
• 重复项无响应：第三、四行元素完全相同，悬停第三行可正常渲染tooltip，但第四行的tooltip完全不显示。

修复方案与代码调整 #

1. 闪烁问题修复 #

• 将me-1的margin从内部img移到.hover-tooltip元素本身，避免动态添加元素导致布局变动触发重复鼠标事件。
• 禁用Bootstrap tooltip的默认触发逻辑，设置trigger: 'manual'，避免和自定义事件冲突。

2. 鼠标移出不关闭修复 #

• 添加mouseleave事件监听，触发时隐藏对应tooltip。
• 异步请求返回前，判断鼠标是否仍在当前元素上，防止无效显示。

3. 重复项无响应修复 #

• 无论数据是否已缓存，都执行tooltip内容更新与显示逻辑，确保所有元素都能触发tooltip。

修改后的完整代码 #

JavaScript #

var hoverData = [];

// 初始化tooltip，设置手动触发
$('.hover-tooltip').each(function() {
  // 把margin加到容器上，避免内部img布局变动
  $(this).addClass('me-1').prepend(`<img src="https://mmotimer.com/aoc/images/${$(this).data('hover-id')}.webp" height="${$(this).data('hover-size')}" width="${$(this).data('hover-size')}">`);
  // 初始化tooltip，禁用默认触发
  new bootstrap.Tooltip(this, {
    trigger: 'manual',
    placement: $(this).data('bs-placement'),
    title: $(this).data('bs-title'),
    html: $(this).data('bs-html')
  });
});

async function userAction(id) {
  try {
    const response = await fetch(`https://mmotimer.com/aoc/?id=${id}`);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return await response.json();
  } catch (error) {
    console.error('Error fetching data:', error);
    return null;
  }
}

$(".hover-tooltip")
  .mouseover(function() {
    const $el = $(this);
    const hoverId = $el.data('hover-id');
    let hoverDataItem = hoverData.find(item => item.id === hoverId);

    if (!hoverDataItem) {
      userAction(hoverId).then(v => {
        if (!v) return;
        hoverDataItem = { id: hoverId, data: v };
        hoverData.push(hoverDataItem);
        // 检查鼠标是否还在元素上
        if ($el.is(':hover')) {
          updateAndShowTooltip($el, hoverDataItem);
        }
      });
    } else {
      updateAndShowTooltip($el, hoverDataItem);
    }
  })
  .mouseleave(function() {
    const tooltipEl = bootstrap.Tooltip.getInstance($(this));
    if (tooltipEl) {
      tooltipEl.hide();
    }
  });

// 封装tooltip更新与显示逻辑
function updateAndShowTooltip($el, dataItem) {
  const tooltipEl = bootstrap.Tooltip.getInstance($el[0]);
  if (tooltipEl && dataItem.data?.data) {
    tooltipEl.setContent({
      '.tooltip-inner': `<i>${dataItem.data.data}</i>`
    });
    tooltipEl.show();
  }
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="d-flex">
  <div class="hover-tooltip" data-bs-placement="left" data-bs-title="Loading skill data..." data-bs-html="true" data-hover-size="35" data-hover-id="10001"></div>
  <div class="hover-tooltip" data-bs-placement="left" data-bs-title="Loading skill data..." data-bs-html="true" data-hover-size="35" data-hover-id="10002"></div>
  <div class="hover-tooltip" data-bs-placement="left" data-bs-title="Loading skill data..." data-bs-html="true" data-hover-size="35" data-hover-id="10003"></div>
  <div class="hover-tooltip" data-bs-placement="left" data-bs-title="Loading skill data..." data-bs-html="true" data-hover-size="35" data-hover-id="10004"></div>
  <div class="hover-tooltip" data-bs-placement="left" data-bs-title="Loading skill data..." data-bs-html="true" data-hover-size="35" data-hover-id="10005"></div>
</div>
<div class="d-flex">
  <div class="hover-tooltip" data-bs-placement="left" data-bs-title="Loading skill data..." data-bs-html="true" data-hover-size="35" data-hover-id="20001"></div>
  <div class="hover-tooltip" data-bs-placement="left" data-bs-title="Loading skill data..." data-bs-html="true" data-hover-size="35" data-hover-id="20002"></div>
  <div class="hover-tooltip" data-bs-placement="left" data-bs-title="Loading skill data..." data-bs-html="true" data-hover-size="35" data-hover-id="20003"></div>
  <div class="hover-tooltip" data-bs-placement="left" data-bs-title="Loading skill data..." data-bs-html="true" data-hover-size="35" data-hover-id="20004"></div>
  <div class="hover-tooltip" data-bs-placement="left" data-bs-title="Loading skill data..." data-bs-html="true" data-hover-size="35" data-hover-id="20005"></div>
</div>
<div class="d-flex">
  <div class="hover-tooltip" data-bs-placement="left" data-bs-title="Loading skill data..." data-bs-html="true" data-hover-size="35" data-hover-id="30001"></div>
  <div class="hover-tooltip" data-bs-placement="left" data-bs-title="Loading skill data..." data-bs-html="true" data-hover-size="35" data-hover-id="30002"></div>
  <div class="hover-tooltip" data-bs-placement="left" data-bs-title="Loading skill data..." data-bs-html="true" data-hover-size="35" data-hover-id="30003"></div>
  <div class="hover-tooltip" data-bs-placement="left" data-bs-title="Loading skill data..." data-bs-html="true" data-hover-size="35" data-hover-id="30004"></div>
  <div class="hover-tooltip" data-bs-placement="left" data-bs-title="Loading skill data..." data-bs-html="true" data-hover-size="35" data-hover-id="30005"></div>
</div>
<div class="d-flex">
  <div class="hover-tooltip" data-bs-placement="left" data-bs-title="Loading skill data..." data-bs-html="true" data-hover-size="35" data-hover-id="30001"></div>
  <div class="hover-tooltip" data-bs-placement="left" data-bs-title="Loading skill data..." data-bs-html="true" data-hover-size="35" data-hover-id="30002"></div>
  <div class="hover-tooltip" data-bs-placement="left" data-bs-title="Loading skill data..." data-bs-html="true" data-hover-size="35" data-hover-id="30003"></div>
  <div class="hover-tooltip" data-bs-placement="left" data-bs-title="Loading skill data..." data-bs-html="true" data-hover-size="35" data-hover-id="30004"></div>
  <div class="hover-tooltip" data-bs-placement="left" data-bs-title="Loading skill data..." data-bs-html="true" data-hover-size="35" data-hover-id="30005"></div>
</div>

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