Docusaurus 中能否实现点击或悬停触发的弹窗功能？

完全可以实现该需求，下面是两种生产环境常用的落地思路：

方案1：轻量MDX封装方案（无额外依赖，适合绝大多数场景） #

Docusaurus 默认支持MDX语法，你可以直接封装一个可全局复用的弹窗组件，所有正文页面都可以直接调用，无需重复写表格内容：

• 第一步：在项目src/components目录下新建ReferenceModal.js组件，核心逻辑用state控制弹窗显隐，内置你要展示的参考表：

import React, { useState } from 'react';
import styles from './ReferenceModal.module.css';

export default function ReferenceModal({ triggerText = "查看可选值参考表" }) {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      {/* 触发元素，默认样式模拟普通链接，可自定义 */}
      <span className={styles.trigger} onClick={() => setIsOpen(true)}>
        {triggerText}
      </span>
      {isOpen && (
        <div className={styles.modalOverlay} onClick={() => setIsOpen(false)}>
          <div className={styles.modalContent} onClick={e => e.stopPropagation()}>
            <button className={styles.closeBtn} onClick={() => setIsOpen(false)}>×</button>
            {/* 此处替换为你的可选值参考表代码 */}
            <table>
              <thead>
                <tr><th>参数名</th><th>可选值</th><th>说明</th></tr>
              </thead>
              <tbody>
                <tr><td>示例参数</td><td>1/2/3</td><td>对应参数的取值说明</td></tr>
              </tbody>
            </table>
          </div>
        </div>
      )}
    </>
  )
}

• 第二步：同目录下新建ReferenceModal.module.css写基础样式，自动适配Docusaurus明暗主题：

.trigger {
  color: var(--ifm-link-color);
  text-decoration: underline;
  cursor: pointer;
}
.modalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modalContent {
  background: var(--ifm-background-color);
  padding: 2rem;
  border-radius: 8px;
  max-width: 85%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}
.closeBtn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  border: none;
  background: none;
  font-size: 1.5rem;
  cursor: pointer;
}

• 第三步：在需要用到该弹窗的mdx文件顶部引入组件，正文对应位置直接调用即可，支持自定义触发文字：

---
# 你的文档页标题
---
import ReferenceModal from '@site/src/components/ReferenceModal';

正文内容，需要展示参考表的位置直接调用：<ReferenceModal triggerText="查看参数可选值" />

方案2：悬停触发方案 #

如果需要鼠标悬停就展示参考表，只需要把上述组件的触发逻辑改成onMouseEnter显示、onMouseLeave隐藏即可；也可以直接扩展Docusaurus内置的Tooltip组件，把表格内容塞进Tooltip的自定义插槽，调整Tooltip最大宽度适配表格尺寸即可。

优化建议 #

• 如果参考表内容需要频繁修改，可以把表格内容单独抽成JSON文件或者独立MDX片段，组件里直接导入，维护更方便
• 无需引入第三方弹窗库，避免增大项目打包体积
• 所有样式直接复用Docusaurus内置的主题变量，不需要额外适配明暗模式

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