如何在 Angular 中使用 popper

Question

我正在尝试为我的应用程序创建一个库，它将使用指令作为 popper 触发器和提示目标。该指令使用 '@ContentChild' 来获取 ng-template 我想在提示中显示的内容。

问题是实际上没有任何效果。

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

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

---

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

是否可以创建一个 DOM 元素并将其用作内部弹出提示 而不 将其附加到正文。

popper 对象已成功创建，但我不知道如何使用它。阅读 popper.js 文档只会让我头脑混乱。

---

更新 #1

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

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

Answer 1

我删除这个问题并不是为了帮助像我这样的人。

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

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

3) 尝试将其关闭

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

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