工具提示適用於鼠標 hover 並單擊兩者 - ngbootstrap

Question

我正在使用https://ng-bootstrap.github.io/#/components/tooltip/並且需要在鼠標懸停和單擊時打開工具提示。

基本上，鼠標 hover text1 出現，點擊工具提示文本變為 text2。 在示例中，我只看到一個事件（單擊或懸停）。

最好的例子是 - https://pypi.org/project/nltk/ - 我需要使用https://ng-bootstrap.ZBF215181B5140522137B3D4F6B7354/4AZ.io所需的相同功能。

Angular 7 正在我的項目中使用。

Answer 1

您可以使用ngb-tooltip的上下文和手動觸發功能來實現此目的。

在您的 HTML 中，定義工具提示：

<ng-template #tipContent let-greeting="greeting">{{greeting}}</ng-template>

上面的 HTML 將在工具提示中將變量greeting的值顯示為文本。

還要定義您希望工具提示出現的按鈕（或其他 HTML）元素

<button
  type="button"
  class="btn btn-outline-secondary mr-2"
  [ngbTooltip]="tipContent"
  triggers="manual"
  #t1="ngbTooltip"
  (mouseover)="openTooltip(t1, 'text 1')"
  (mouseout)="closeTooltip(t1)"
  (click)="openTooltip(t1, 'text 2')">
      Tooltip on top
</button>

這使用手動觸發器，您可以綁定到mouseover和mouseout事件以在將鼠標懸停在按鈕上時顯示工具提示text 1 。 click綁定將顯示工具提示text 2 。

在openTooltip文件中定義的 openTooltip function 打開工具提示，該工具提示將作為參數傳遞給該方法的文本傳遞。 該行tooltip.close()是必需的，否則單擊按鈕以顯示text 2工具提示將不起作用：

openTooltip(tooltip, greeting: string) {
  tooltip.close();
  tooltip.open({ greeting });
}

這里有一個有效的 StackBlitz 演示。

closeTooltip function 只是關閉工具提示：

closeTooltip(tooltip) {
  tooltip.close();
}