Bootstrap 5.3 不支持通过 JS 选项直接设置 maxWidth，但可通过 customClass 配合 CSS 自定义属性 --bs-tooltip-max-width 实现单个 Tooltip 的独立宽度控制，无需 Sass 且不影响全局样式。
bootstrap 5.3 不支持通过 js 选项直接设置 `maxwidth`，但可通过 `customclass` 配合 css 自定义属性 `--bs-tooltip-max-width` 实现单个 tooltip 的独立宽度控制，无需 sass 且不影响全局样式。
在 Bootstrap 5.3 中，Tooltip 的最大宽度由 CSS 自定义属性 --bs-tooltip-max-width 控制，默认值为 200px。该属性无法通过 JavaScript 初始化选项（如 { maxWidth: "300px" }）直接设置，因为 maxWidth 并非官方支持的 Tooltip 选项 —— 尝试传入将被忽略。
✅ 正确做法是利用 customClass 选项（或 data-bs-custom-class 属性），为特定 Tooltip 绑定专属 CSS 类，并在该类中覆盖 --bs-tooltip-max-width：
<!-- HTML 示例 --> <button id="default-btn" title="默认宽度（200px）">默认 Tooltip</button> <button id="wide-btn" title="超长文本提示内容，需要更宽显示区域" data-bs-custom-class="tooltip-wide">宽 Tooltip（属性方式）</button> <button id="narrow-btn" title="精简提示">窄 Tooltip（JS 方式）</button>
// JS 初始化（推荐方式）
const wideBtn = document.getElementById('wide-btn');
new bootstrap.Tooltip(wideBtn); // 已通过 data-bs-custom-class 设置样式
const narrowBtn = document.getElementById('narrow-btn');
new bootstrap.Tooltip(narrowBtn, {
customClass: 'tooltip-narrow' // 指定自定义类名
});
/* CSS：为不同 Tooltip 设置独立最大宽度 */
.tooltip-wide {
--bs-tooltip-max-width: 350px !important;
}
.tooltip-narrow {
--bs-tooltip-max-width: 120px !important;
}
? 关键说明：
- !important 是必需的 —— Bootstrap 内部样式优先级较高，不加 !important 会导致自定义值被覆盖；
- customClass 可同时用于 JS 初始化（{ customClass: 'xxx' }）和 HTML 属性（data-bs-custom-class="xxx"），二者效果一致；
- 所有样式均作用于 Tooltip 的 .tooltip-inner 元素（该元素继承 --bs-tooltip-max-width）；
- 此方案完全兼容纯 CSS 环境，无需构建工具或 Sass 编译。
? 提示：若需动态调整宽度（如响应式场景），可结合 @media 查询或 JS 动态切换 class，例如：
if (window.innerWidth <pre class="brush:php;toolbar:false;">.tooltip-mobile { --bs-tooltip-max-width: 220px !important; }通过 customClass + CSS 自定义属性，你既能精准控制单个 Tooltip 的宽度，又能保持代码清晰、样式解耦，是 Bootstrap 5.3 中最规范、最可持续的解决方案。
