如何获取Tooltip的实际显示高度（非tooltip.getHeight方法）

云上老周

2026-4-8

嘿，我太懂这种困扰了！之前做项目时也踩过tooltip.getHeight()的坑——拿回来的高度要么是0，要么和实际显示的完全对不上，后来才搞明白是因为Tooltip还没完成渲染，这个方法返回的只是预设的布局高度，根本不是实际显示后的真实高度。我当时的场景和你差不多：点击按钮触发Tooltip，还要根据它的实际高度去计算你说的Point B坐标，定位老是跑偏。

给你几个亲测好用的办法：

方法一：等Tooltip完全显示后用getBoundingClientRect()获取
大部分Tooltip都是动态渲染的，刚触发时要么还没挂载到DOM里，要么处于隐藏状态，这时候拿高度肯定不准。你可以监听Tooltip的「显示完成」事件——比如Bootstrap的Tooltip会触发shown.bs.tooltip，Vue/React这类框架里就用nextTick或者生命周期钩子等DOM更新完，再调用这个API：
```
// 举个原生JS的例子，换其他组件库只要对应修改监听事件就行
const targetBtn = document.querySelector('#your-target-button');
targetBtn.addEventListener('click', function() {
  // 这里换成组件自带的显示完成事件会更靠谱，比如shown.bs.tooltip
  setTimeout(() => {
    const tooltipEl = document.querySelector('.tooltip');
    const rect = tooltipEl.getBoundingClientRect();
    const actualHeight = rect.height;
    console.log('Tooltip实际显示高度：', actualHeight);
  }, 0);
});
```
getBoundingClientRect()会返回元素在页面上实际占据的尺寸和位置，高度值精准到小数，连padding、border这些都算进去（如果盒模型是border-box的话），用来计算定位坐标超合适。
方法二：用getComputedStyle()拿计算后的样式高度
这个方法能直接获取元素实际渲染后的CSS计算值，拿到的是带单位的字符串，转成数字就能用：
```
const tooltipEl = document.querySelector('.tooltip');
const computedHeightStr = window.getComputedStyle(tooltipEl).height;
const actualHeight = parseFloat(computedHeightStr);
```
同样要记住：必须等Tooltip完全显示出来再调用，不然拿到的可能是auto或者0。
方法三：自定义Tooltip组件的内部获取
如果是你自己封装的Tooltip组件，那在组件内部的渲染完成钩子（比如React的useEffect、Vue的mounted）里，通过ref拿到元素后再用上面两种方法取高度，比从外部获取稳定多了——毕竟内部能精准掌握组件什么时候渲染完成。

最后再提醒一句：要是你用的是UI组件库的Tooltip，一定要先查文档找它的「显示完成」事件，别用setTimeout硬等，虽然短延时也能凑合用，但用官方事件才是最稳妥的。

内容来源于stack exchange