当鼠标进入或悬停时显示 ngx bootstrap 工具提示，当点击鼠标从那里移除时显示 ngx bootstrap 工具提示

Question

我不完全理解触发器对 https://valor-software.com/ngx-bootstrap/#/tooltip#triggers-custom

的确切作用的概念

例如，当我们这样做时：

triggers="mouseenter:click"

这是否意味着我们hover/put鼠标在那里时会显示工具提示并在单击时消失？

如果是这样，是否可以指定工具提示应该消失的两个事件。

例如，我想在将鼠标悬停在它上面时显示工具提示，然后在我单击它或从那里移开鼠标时让它消失。有什么想法吗？

Answer 1

您可以使用一组事件，像这样的方法可能有效：triggers="mouseenter mouseleave click"

triggers => Specifies events that should trigger. Supports a space separated list of event names.

Answer 2

你可以同时玩 Custom triggers and Manual triggering:

<button 
  tooltip="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."
  triggers="mouseenter:mouseleave"
  #pop="bs-tooltip"
  (click)="pop.hide()"
>Tooltip</button>

此代码在隐藏时不会通过单击触发工具提示。同样的结果是当你应用 triggers="mouseenter click:mouseleave click" 而没有 (click) 时，但它看起来很糟糕......也许这是一个错误，但 triggers="mouseenter:mouseleave click" 不会给出这样的结果。无论如何，手动处理 (click)，您将获得相对的灵活性。

Answer 3

@Nikola Gavric 接受的答案没有解决以下问题：mouseenter（显示工具提示）> click（隐藏工具提示）> mouseleave（再次显示工具提示).

对于那些需要 Gmail 操作菜单上的触发器（鼠标悬停时显示工具提示并在鼠标离开或单击时消失）的用户，请使用以下内容：

triggers="mouseenter:mouseleave mouseenter:click"

当鼠标进入或悬停时显示 ngx bootstrap 工具提示，当点击鼠标从那里移除时显示 ngx bootstrap 工具提示

Display ngx bootstrap tooltip when mouse entered or hovered and remove when either clicked on mouse removed from there

angular2-template

ngx-bootstrap

angular