angular - 如何在 Angular 中使用 popper

Question

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

问题是实际上什么都不起作用。

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

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

---

问题是我应该如何显示/隐藏弹出器。

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

popper 对象已成功创建，但我无法找到如何使用它。阅读 popper.js 文档只会让我的头脑变得困惑。

---

更新 #1

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

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

Answer 1

我删除这个问题并不是为了帮助和我一样处境的其他人。

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

2) 让你的 html 高度足够让你的元素滚出屏幕

3) 尝试将其滚动关闭

在我的例子中，Popper 已成功创建并正常工作。我的位置是“顶部”，当我滚动页面以使我的 anchor 元素(我试图将提示定位到的元素)离开屏幕时，我看到我的提示被移动到目标元素下方，这意味着 Popper 确实有效.

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