如何增大Bootstrap 4中tooltip和popover的字体大小

基础调整：放大字体大小 #

高版本Bootstrap（v5及以上）调整了popover的样式优先级、默认类名规则，旧版本的覆盖方案会失效，可使用以下CSS直接覆盖默认样式：

/* 全局调整popover整体字体大小 */
.popover {
  font-size: 1rem !important; /* 可根据需求调整数值，比如1.2rem就是放大20% */
}

/* 单独调整popover标题样式 */
.popover .popover-header {
  font-size: 1.1rem !important;
}

/* 单独调整popover正文样式，大文本量下可搭配行高优化可读性 */
.popover .popover-body {
  font-size: 1rem !important;
  line-height: 1.6;
}

进阶配置：带标题、正文的规范格式Popover #

初始化时开启HTML支持，即可实现自定义排版的复杂popover内容：

// Bootstrap 5 初始化示例
const popoverTriggers = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverInstanceList = [...popoverTriggers].map(el => new bootstrap.Popover(el, {
  placement: 'top', // 可选值：top/bottom/left/right
  html: true, // 允许content字段插入HTML标签实现复杂排版
  title: '自定义Popover标题',
  content: '<p>支持多段落、列表等任意HTML结构</p><ul><li>列表项1</li><li>列表项2</li></ul>'
}))

常见失效问题排查 #

• 自定义CSS的加载顺序必须晚于Bootstrap官方CSS文件，否则会被官方样式覆盖
• 若在Vue/React等框架的scoped局部样式中配置，需使用框架对应的深度选择器穿透样式作用域，例如Vue3用:deep(.popover)
• 确认初始化属性和版本匹配：Bootstrap 4及以下用data-toggle="popover"，Bootstrap 5及以上用data-bs-toggle="popover"

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