Bootstrap V5 Tooltip自动定位问题：自定义箭头异常与固定顶部需求

问题概述 #

使用Bootstrap 5 Tooltip时，自定义箭头仅在Tooltip位于顶部时显示正常；自动定位功能会将Tooltip切换至右侧或底部，导致箭头显示异常。尝试设置allowedAutoPlacements: ["top"]未生效，需要两种解决方案：修复自定义箭头适配不同位置，或彻底禁用自动定位强制Tooltip始终显示在顶部。

方案一：修复自定义箭头适配所有位置 #

Bootstrap Tooltip会根据位置为容器添加对应类（如tooltip-top、tooltip-right、tooltip-bottom、tooltip-left），箭头元素(.tooltip-arrow)的样式需针对不同位置单独调整：

针对默认三角形箭头的样式修复 #

如果自定义箭头仅修改默认三角形的颜色，可添加以下CSS：

/* 自定义Tooltip容器基础样式（按需调整） */
.disclosure-tooltip {
  background-color: #2d3748;
  color: #fff;
  border-radius: 4px;
}

/* 顶部箭头颜色 */
.disclosure-tooltip.tooltip-top .tooltip-arrow::before {
  border-top-color: #2d3748;
}

/* 右侧箭头颜色 */
.disclosure-tooltip.tooltip-right .tooltip-arrow::before {
  border-right-color: #2d3748;
}

/* 底部箭头颜色 */
.disclosure-tooltip.tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: #2d3748;
}

/* 左侧箭头颜色 */
.disclosure-tooltip.tooltip-left .tooltip-arrow::before {
  border-left-color: #2d3748;
}

针对自定义形状箭头的样式修复 #

如果是自定义箭头形状（如方形旋转45度），需调整箭头的定位与变换：

/* 自定义箭头通用样式 */
.disclosure-tooltip .tooltip-arrow {
  width: 10px;
  height: 10px;
  background-color: #2d3748;
  border: none;
}

/* 顶部箭头定位 */
.disclosure-tooltip.tooltip-top .tooltip-arrow {
  bottom: -5px;
  transform: rotate(45deg);
}

/* 右侧箭头定位 */
.disclosure-tooltip.tooltip-right .tooltip-arrow {
  left: -5px;
  transform: rotate(45deg);
}

/* 底部箭头定位 */
.disclosure-tooltip.tooltip-bottom .tooltip-arrow {
  top: -5px;
  transform: rotate(45deg);
}

/* 左侧箭头定位 */
.disclosure-tooltip.tooltip-left .tooltip-arrow {
  right: -5px;
  transform: rotate(45deg);
}

方案二：彻底禁用自动定位，强制Tooltip始终显示在顶部 #

Bootstrap 5 Tooltip默认开启autoPlacement: true，即使设置placement: "top"，元素靠近视口边缘时仍会自动切换位置。需通过以下设置彻底禁用自动定位：

修改JavaScript初始化代码：

new Tooltip(document.body, {
  selector: "[data-bs-toggle='tooltip']",
  sanitize: false,
  placement: "top",
  html: true,
  autoPlacement: false, // 关键：关闭自动定位逻辑
});

注意：allowedAutoPlacements参数仅在placement设为"auto"时生效，因此之前的设置无法阻止位置切换。设置autoPlacement: false后，Tooltip会严格遵循指定的placement值，不再自动调整。

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