Ng-bootstrap popover 隱藏在 mouseleave 上，但我希望它在移動到 popover 內容時保持打開狀態，以便用戶可以單擊 popover 內的鏈接

Question

我有一個 ng-bootstrap 彈出窗口，當鼠標懸停在圖標上時會顯示。 我希望用戶能夠單擊彈出框內容中的鏈接。 當前，當用戶嘗試在彈出框內輸入 go 時，它會在用戶到達之前消失。

如果我嘗試在單擊而不是懸停時保持彈出窗口打開，當我 go 到另一個彈出窗口時它不會關閉。

我希望它在我將鼠標從彈出窗口移開時自動關閉，並希望它在我 hover 圖標時打開並在我將鼠標從圖標移到彈出窗口內容時保持打開狀態。

我已經嘗試了一些解決方案，但是我沒有讓它正常工作。

我的代碼目前看起來像這樣：

popover.component.html

<div>
  <ng-template #popContent>
    <ng-content></ng-content>
  </ng-template>

  <span
    #popover="ngbPopover"
    class="popover popover-icon ms-2"
    placement="right auto"
    [animation]="true"
    triggers="mouseenter:mouseleave"
    [ngbPopover]="popContent"
    data-test="popOver"
    autoClose="outside"
    [openDelay]="500"
  >
    ?
  </span>
</div>

popover.component.ts

此文件不包含附加代碼（空）。

任何人都知道我怎么能 go 關於這個？

Answer 1

不確定這是一個正確的答案，但無論如何都值得深思，我會在新年銀行假期早上給出最好的答案......

我之前處理類似彈出窗口問題的方法是讓彈出窗口的不可見邊界擴展到懸停元素上； 這樣，一旦彈出窗口打開，鼠標就已經在其中了。

然后，一切如常——鼠標移開后關閉。

根據您的用戶界面，它可能有點笨拙； 如果打開的元素的邊界重疊，它可以防止相鄰元素打開自己的彈出窗口，例如，這令人沮喪。

在處理鼠標進入/懸停事件以及何時、何地、為什么出現這些事件以及如何停止它們（如果需要）時也有一些樂趣 - 同樣，取決於您的 DOM 的外觀和嘗試的內容做什么。

不過，這通常是實現您所追求的目標的一種簡單但有效的方法。

正如您所看到的，您在兩側都有足夠的空間來捕獲鼠標並使其在彈出窗口關閉之前無法使用。

有更聰明的方法來做到這一點，但這是一個簡單的方法。

Answer 2

如果您有少量帶有彈出窗口的圖標，您可以嘗試使用 mouseenter 控制彈出窗口來解決此問題。

因此，如果您將鼠標移到popup2 上，您可以觸發popup1關閉並打開 popup2。

彈出窗口 1 反之亦然。

快速示例：

<button
  #popover1="ngbPopover"
  type="button"
  placement="top"
  autoClose="outside"
  class="btn btn-outline-secondary me-2"
  (mouseenter)="popover1.open(); popover2.close();"
  popoverTitle="Popover on top"
  [ngbPopover]="popContent">
  Popover on top
</button>

<button
  #popover2="ngbPopover"
  type="button"
  placement="top"
  autoClose="outside"
  class="btn btn-outline-secondary me-2"
  (mouseenter)="popover2.open(); popover1.close();"
  popoverTitle="Popover on top"
  [ngbPopover]="popContent">
  Popover on top
</button>

<ng-template #popContent>
  Hello, <b>Test</b> <a href=""> Linky</a>
</ng-template>

如果您有更多帶有彈出窗口的圖標，您可以嘗試使用ngbPopover查詢和查找元素並控制您在組件內的行為。