如何在 Angular 中使用 popper

Question

我正在尝试为我的应用程序创建一个库，它将使用指令作为 popper 触发器和提示目标。 该指令使用“@ContentChild”为获得ng-template什么，我想在提示显示。

问题是实际上没有任何工作。

这是我到目前为止所做的https://stackblitz.com/edit/angular-nwojkq

我无法从文档中理解如何使用这个库。 我试图检查节点和this.popper参考以寻找线索，但没有成功。 还没有找到任何方法让“悬停”触发器显示弹出窗口。

---

问题是我应该如何显示/隐藏 popper 。

是否可以创建一个 DOM 元素并将其用作 popper 提示内部而不将其附加到主体。

popper 对象正在成功创建，但是我不知道如何使用它。 阅读 popper.js 文档只会让我的脑子变得一团糟。

---

更新 #1

看起来 popper 确实有效，但它只是在未悬停时显示而不是隐藏。

那么是否有任何方法可以启用/禁用 Popper？ 我不希望它在元素未悬停时跟踪。

Answer 1

我不会删除这个问题来帮助其他像我这样的人。

1) 确保您使用inline-block或inline元素作为 popper 元素（要定位的元素）

2) 使您的 html 高度足以将您的元素滚动到屏幕外

3）尝试将其滚动关闭

就我而言，Popper 已成功创建并正常工作。 我的位置是“顶部”，当我滚动页面以使我的锚元素（我试图将提示定位到的那个）离开屏幕时，我看到我的提示被移动到目标元素下，这意味着 Popper 实际工作.

这是一篇关于如何在 Angular 中使用 Popper.js 的小帖子。 希望这会帮助某人。