如何为JupyterLab自定义扩展添加悬浮提示框（Tooltip/Hoverbox）

架构老林

2026-8-6

为JupyterLab自定义React扩展添加悬浮提示文本的实现方法

方法一：使用JupyterLab官方Tooltip组件（推荐）

JupyterLab的@jupyterlab/ui-components包提供了原生Tooltip组件，能自动适配Lab的主题风格，步骤如下：

在扩展的package.json中添加依赖（替换为对应JupyterLab版本的兼容版本）：
```
"@jupyterlab/ui-components": "^4.0.0"
```

在React组件中导入并使用Tooltip：

import { Tooltip } from '@jupyterlab/ui-components';

// 包裹需要添加提示的元素
export const MyExtensionElement = () => {
  return (
    <Tooltip content="这里是你的扩展描述信息，比如：一键导出分析报告的工具">
      <button>我的扩展</button>
    </Tooltip>
  );
};

方法二：HTML原生title属性（简单场景）

如果只需要基础文本提示，直接给React元素添加title属性即可：

<button title="你的扩展功能描述">我的扩展按钮</button>

方法三：自定义悬浮提示组件（复杂定制场景）

若需要个性化样式，可结合JupyterLab的CSS主题变量自定义组件：

import React from 'react';
import { styled } from '@jupyterlab/ui-components';

const HoverWrapper = styled.div`
  position: relative;
  display: inline-block;
`;

const CustomTooltip = styled.div`
  visibility: hidden;
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--jp-tooltip-background);
  color: var(--jp-tooltip-color);
  padding: 8px 12px;
  border-radius: 4px;
  z-index: 1000;
  white-space: pre-wrap;

  ${HoverWrapper}:hover & {
    visibility: visible;
  }
`;

export const CustomExtensionButton = () => {
  return (
    <HoverWrapper>
      <button>高级扩展</button>
      <CustomTooltip>这是一个支持多格式导出的自定义扩展，可将Notebook内容导出为PDF、HTML等格式</CustomTooltip>
    </HoverWrapper>
  );
};