如何在Quarto博客中自定义悬停弹出式脚注文本？

Quarto启用footnotes-hover选项后，悬停脚注编号弹出的提示框是基于Bootstrap Tooltip组件实现的，并非关联你之前修改的.footnotes系列类，所以需要针对Tooltip的专属CSS类来定制样式。

将以下代码添加到你的自定义CSS文件中，即可修改弹窗的字体、颜色、字号等样式：

/* 统一设置弹窗的基础样式变量（适配Bootstrap Tooltip） */
.tooltip {
  --bs-tooltip-bg: #f8f9fa; /* 弹窗背景色 */
  --bs-tooltip-color: #333; /* 弹窗文本颜色 */
  font-family: 'Geogrotesque Trial', sans-serif;
  font-size: 0.8em;
}

/* 精准控制弹窗内容的文本样式 */
.tooltip-inner {
  font-family: 'Geogrotesque Trial', sans-serif !important;
  font-size: 0.8em;
  color: #333;
  line-height: 1.4;
  padding: 8px 12px;
  border-radius: 4px;
}

/* 可选：修改弹窗箭头的颜色，和背景色保持一致 */
.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: #f8f9fa;
}

补充说明 #

• 确保你的自定义CSS文件已在Quarto的YAML配置中声明（如css: styles.css），保证样式加载优先级高于默认样式。
• 如果不需要强制覆盖，可尝试去掉!important，调整CSS加载顺序即可生效。

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