在使用Tippy进行悬停时如何在输入字段中创建模板？

Question

我有一个按钮，当我将鼠标悬停在按钮上时，应该在其上方显示一个模板，并且我应该能够填写并提交。我该如何使用Tippy做到这一点。

如上图所示，在下面的代码中，我需要有一个输入字段和更多的带有悬停提交和取消的字段。

render() {
    return (
      <div className="App">
        <div>
          <button
            variant="contained"
            color="primary"
            data-tippy="Tooltip"
            data-tippy-animation="scale"
            data-tippy-duration="0"
            data-tippy-arrow="true"
            data-tippy-delay="[800, 200]"
          >
            Click to Tag
          </button>

          <button data-tippy="Tooltip">Text</button>
          <button data-tippy="Another Tooltip">Text</button>
          <button data-tippy="Hey">Text</button>
        </div>
      </div>
    );
  }

我已经访问了以下网址，但无法理解如何使用它 https://atomiks.github.io/tippyjs/html-content/