如何调整tippy.js工具提示的maxheight（最大高度）？

方法一：直接通过CSS控制全局或单个提示框 #

Tippy 的提示框默认带有 .tippy-box 类，你可以直接用 CSS 设置高度相关属性：

• 限制最大高度并允许内容滚动（推荐，适配不同内容长度）：

.tippy-box {
  box-sizing: border-box; /* 确保高度包含内边距 */
  max-height: 200px;
  overflow-y: auto;
}

• 设置固定高度（适合内容长度固定的场景）：

.tippy-box {
  height: 150px;
  overflow-y: auto; /* 内容超出时滚动 */
}

如果只想针对某个特定提示框调整，可结合元素的自定义类或tippy的data-tippy-target来精准选择。

方法二：初始化时传入带样式的自定义内容容器 #

如果需要为单个提示框单独设置高度，可以先创建一个带样式的DOM容器，再作为内容传给tippy：

// 创建自定义内容容器
const tipContent = document.createElement('div');
tipContent.style.maxHeight = '180px';
tipContent.style.overflowY = 'auto';
tipContent.innerHTML = '这里是你的工具提示内容，即使文本很长也会被限制高度并支持滚动';

// 初始化tippy
tippy('#your-target-element', {
  content: tipContent
});

方法三：使用自定义主题区分不同高度的提示框 #

如果需要多种高度样式的提示框，可定义自定义主题：

/* 定义自定义主题的高度样式 */
.tippy-box[data-theme='tall-tip'] {
  max-height: 300px;
  overflow-y: auto;
}

.tippy-box[data-theme='short-tip'] {
  max-height: 120px;
  overflow-y: auto;
}

初始化时指定对应主题即可：

// 应用高提示框主题
tippy('#tall-element', {
  theme: 'tall-tip'
});

// 应用短提示框主题
tippy('#short-element', {
  theme: 'short-tip'
});

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