如何在Angular中使用popper

时间:2019-08-02 14:10:46

标签: angular typescript popper.js

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

问题是实际上什么也没用。

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

我无法从文档中了解如何使用此lib all。我试图检查节点和this.popper参考的线索,但没有成功。尚未找到任何方法使“悬停”触发器显示弹出窗口。


问题是我应该如何显示/隐藏弹出窗口

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

popper对象已成功创建,但是我无法找到如何使用它。读取popper.js文档只会使我的头脑混乱。


更新#1

看起来波普尔实际上可以工作,但是它只是显示而不是在未悬停时隐藏。

那有没有启用/禁用Popper的方法?我不希望元素未悬停时保持跟踪。

1 个答案:

答案 0 :(得分:1)

我不会删除此问题以帮助其他处境类似我的人。

1)确保将inline-blockinline元素用作popper元素(要定位的元素)

2)使您的html高度足以在屏幕上滚动元素

3)尝试将其向下滚动

在我的情况下,发生了Popper成功创建并工作的情况。我的位置是“顶部”,当我滚动页面以使锚元素(我要将提示定位到的元素)不在屏幕上时,我已经看到提示已移动到目标元素下,这意味着Popper实际上起作用了

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