如何在四开博客中自定义弹出脚注文本？

Question

我最近正在尝试制作一个四开博客，虽然这似乎不是一个大问题，但当 YAML 中的

footnotes-hover

选项设置为 true 时，我在弄清楚如何自定义弹出脚注文本时遇到了麻烦。为了更具体地说明我正在寻找的内容，当用户将鼠标放在脚注编号上时，我希望能够自定义弹出窗口中显示的脚注文本（更改其字体、颜色、大小等）如下面的屏幕截图所示。

如所见，我可以使用以下行自定义 CSS 代码更改脚注编号的外观；

.footnote-ref {
  font-family: 'Geogrotesque Trial', sans-serif !important;
  font-size: 1em; /* Adjust font size */
  color: #56A0D3; /* Change text color */
  font-weight: 500;
}

我还可以按照我的意愿，使用以下 css 代码行对脚注部分进行更改；

/* Customize the footnotes section heading */
.footnotes h2 {
  font-family: 'Geogrotesque Trial', sans-serif !important;
  font-size: 1.4em; /* Adjust font size */
  color: #333; /* Change text color */
}

/* Customize the footnote list items */
.footnotes ol {
  font-family: 'Geogrotesque Trial', sans-serif !important;
  font-size: 0.85em; /* Adjust font size */
  color: #666; /* Change text color */
}

/* Customize the footnote content */
.footnotes ol li p {
  font-family: 'Geogrotesque Trial', sans-serif !important;
  font-size: 0.7em; /* Adjust font size */
  color: #666; /* Change text color */
}

但是，当我将鼠标悬停在脚注上时，我很难更改弹出的脚注文本，如上面的屏幕截图所示。

Answer 1

悬停框有一个

.tippy-box

CSS 类。您可以尝试以下方法来自定义其文本：

.tippy-box {
  color: red !important;
  font-weight: bold;
  /*...*/
}