在Quarto HTML文档中实现指定术语悬停显示任意文本的方法

针对你需要在Quarto HTML文档中实现「悬停术语显示文档内已有定义」的需求，以下是几个可行的方案，兼顾复用性和易用性：

方案1：自定义交叉引用类型（推荐） #

通过配置自定义交叉引用，将术语定义转为可引用对象，结合crossrefs-hover: true实现悬停显示，同时避免重复编写定义。

步骤1：配置YAML #

---
format: 
  html:
    crossrefs-hover: true
crossref:
  custom:
    - type: term
      prefix: ""          # 隐藏引用前缀
      text: "术语定义"    # 悬停提示的标题（可选）
      link-text: ""       # 隐藏额外链接文本
---

步骤2：编写术语定义（添加唯一标签） #

## 术语定义 {#sec-definitions}

### Term 1 {#term-term1}
Example of definition for term 1.

### Term 2 {#term-term2}
Example of definition for term 2.

步骤3：正文引用术语 #

在需要悬停提示的位置使用 @term-term1，用户悬停时会自动显示对应定义内容；如果不需要跳转功能，可添加CSS移除链接样式：

<style>
a[href^="#term-"] {
  color: inherit;
  text-decoration: none;
  cursor: default;
}
</style>

方案2：变量复用+HTML title属性 #

将定义存入Quarto参数变量，正文用带title属性的<span>实现悬停提示，完全复用定义内容，无重复冗余。

步骤1：YAML定义变量 #

---
format: html
params:
  def_term1: "Example of definition for term 1."
  def_term2: "Example of definition for term 2."
---

步骤2：术语定义章节引用变量 #

## 术语定义 {#sec-definitions}

### Term 1
`r params$def_term1`

### Term 2
`r params$def_term2`

步骤3：正文使用悬停提示 #

在正文中提到<span title="`r params$def_term1`">Term 1</span>时，悬停即可显示完整定义。

方案3：CSS+定义列表（纯Markdown风格） #

如果偏好纯Markdown写法，可使用定义列表结合CSS实现悬停显示：

步骤1：编写定义列表 #

## 术语定义 {#sec-definitions}

Term 1
: Example of definition for term 1.

Term 2
: Example of definition for term 2.

步骤2：添加CSS实现悬停 #

<style>
dt {
  display: inline-block;
  position: relative;
  cursor: help;
}
dt::after {
  content: attr(data-def);
  position: absolute;
  bottom: 120%;
  left: 0;
  background: #333;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
dt:hover::after {
  opacity: 1;
}
</style>

步骤3：正文引用术语 #

给术语添加data-def属性，直接复用定义内容：

在正文中提到<span data-def="Example of definition for term 1">Term 1</span>。

注：方案3需要手动复制定义内容到data-def，适合定义较少的场景；方案1和2可自动复用定义，更适合大量术语的文档。

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