移动端调整Bootstrap Tooltip的显示位置

这个需求很常见，毕竟桌面端和移动端的布局空间差异很大，我给你两种靠谱的实现方案，你可以根据自己的项目情况选择：

方案一：动态修改属性 + 重新初始化Tooltip #

这种方法的思路是监听窗口尺寸变化，根据当前屏幕宽度修改data-placement属性，然后重新初始化Tooltip实例，确保位置生效。

代码示例： #

// 定义移动端断点，和Bootstrap默认的sm断点一致（768px），你可以按需调整
const MOBILE_BREAKPOINT = 768;

// 封装更新Tooltip位置的函数
function updateTooltipPlacement() {
  const isMobile = window.innerWidth < MOBILE_BREAKPOINT;
  const tooltipEls = document.querySelectorAll('.tooltip');

  tooltipEls.forEach(el => {
    // 先销毁已存在的Tooltip实例，避免冲突
    if ($(el).data('bs.tooltip')) {
      $(el).tooltip('dispose');
    }

    // 根据屏幕尺寸设置对应位置
    $(el).attr('data-placement', isMobile ? 'left' : 'right');

    // 重新初始化Tooltip
    $(el).tooltip();
  });
}

// 页面加载完成后执行一次初始化
$(document).ready(function() {
  updateTooltipPlacement();

  // 监听窗口大小变化，实时更新Tooltip位置
  $(window).on('resize', updateTooltipPlacement);
});

方案二：利用Tooltip的placement回调函数（更优雅） #

Bootstrap的Tooltip支持传入一个函数作为placement选项，在函数里我们可以动态判断屏幕尺寸，直接返回对应的位置，不需要销毁重建实例，效率更高。

代码示例： #

const MOBILE_BREAKPOINT = 768;

$(document).ready(function() {
  // 初始化Tooltip时使用回调函数动态返回位置
  $('.tooltip').tooltip({
    placement: function() {
      // 判断当前屏幕宽度，返回对应位置
      return window.innerWidth < MOBILE_BREAKPOINT ? 'left' : 'right';
    }
  });

  // 窗口尺寸变化时，触发Tooltip的更新方法，重新计算位置
  $(window).on('resize', function() {
    $('.tooltip').tooltip('update');
  });
});

注意事项： #

• 你可以根据自己的项目需求调整MOBILE_BREAKPOINT的值，比如用Bootstrap的md断点（992px）或者自定义数值
• 如果你的项目使用Bootstrap 5的原生JS（而非jQuery），语法会略有不同，但核心逻辑一致，只需要调整Tooltip的初始化方式
• 第二种方案更推荐，因为它不需要频繁销毁重建Tooltip实例，性能更好

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