工具提示适用于鼠标悬停并单击两者 - ngbootstrap

Question

我正在使用https://ng-bootstrap.github.io/#/components/tooltip/，并且需要在鼠标悬停和点击时打开工具提示。

基本上，鼠标悬停时出现 text1，点击时工具提示文本变为 text2。在示例中，我只看到一个事件（点击或悬停）。

最好的例子是 - https://pypi.org/project/nltk/ - 我需要使用 https://ng-bootstrap.github.io/#/components/tooltip/ 的相同功能。

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

Answer 1

您可以使用ngb-tooltip 的context and manual triggers 功能来实现此目的。

在您的 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 函数在 TypeScript 文件中定义，打开工具提示，将文本作为参数传递给该方法。 tooltip.close() 行是必需的，否则单击按钮以显示 text 2 工具提示将不起作用：

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

有一个有效的 StackBlitz 演示 here。

closeTooltip 函数只是关闭工具提示：

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