如何将工具提示/悬停框添加到 jupyter 实验室扩展

Question

悬停示例

如何将如上图所示的 hover 文本添加到 jupyterlab 中的自定义扩展。 我正在使用 react 在 jupyter lab 中进行扩展，但我想在 hoverbox 中添加扩展的描述。 但是我无法弄清楚。

Answer 1

要在扩展中添加一个 hover 框，您必须将值传递给 [widgetInstance].title.caption 例如：

const extension: JupyterFrontEndPlugin<void> = {
  id: 'some-id',
  autoStart: true || false,
  activate: async(app: JupyterFrontEnd, palette: ICommandPalette) => {
     const { commands } = app;
      let widget1: widget= new widget(); // create the widget
      widget1.id = 'widget1-id';
      widget1.title.label = 'widget Label';
      widget1.title.caption="widget hovering text description"; // this will show the text when you hover over an extension
      app.shell.add(widget1, 'right', { rank: 1 });
      ...
      ...
      ... rest of your code ...

}