如何在 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 的小帖子。 希望這會幫助某人。