Bootstrap 5.3如何单独修改单个Tooltip的最大宽度

Bootstrap Tooltip本身并没有内置maxWidth这类配置项，你之前尝试的那些属性和JS自然不会生效。下面给你两个无需Sass的可行方案，能单独修改目标Tooltip的最大宽度，不影响全局样式：

方案一：用customClass配置专属样式（推荐） #

在JS初始化Tooltip时指定自定义类名，再通过CSS针对这个类设置宽度：

1. 修改Tooltip初始化代码，添加customClass参数：

this.buttonTooltip = new bootstrap.Tooltip(this.buttonImageEl, { 
  html: true, 
  customClass: 'custom-tooltip-width'
});

2. 编写对应的CSS：

.custom-tooltip-width .tooltip-inner {
  max-width: 300px;
  /* 还能按需添加其他样式，比如调整字体、背景色等 */
}

方案二：通过触发元素关联Tooltip样式 #

如果不想改动JS，可给触发Tooltip的元素加专属类，再用CSS选择器定位到对应的Tooltip：

1. 给目标元素（比如你的buttonImageEl）添加类，例如single-tooltip-trigger：

<!-- 示例：给触发Tooltip的图片元素加类 -->
<img src="..." class="single-tooltip-trigger" />

2. 编写CSS利用Tooltip的关联属性定位：

/* 通过Tooltip的data-bs-target属性匹配触发元素的类 */
.tooltip[data-bs-target=".single-tooltip-trigger"] .tooltip-inner {
  max-width: 300px;
}

这两种方法都只会作用于你指定的单个Tooltip，不会影响其他Tooltip的样式。

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