用于鼠标悬停并单击两者的工具提示 - 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();
}

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

tooltip to work for mouse hover and click both - ngbootstrap

javascript

tooltip

ng-bootstrap

angular7