Search code examples
javascriptangulartooltipng-bootstrap

ngbTooltip - Cancel tooltip appearance during delay

I use ngbTooltip on many elements in my application.

Each tooltip is initialized as follows directly in the HTML code

  <div
    ngbTooltip="my tooltip"
    container="body"
    placement="left"
    openDelay="1000"
    triggers="hover"
    (click)="doSomething()"
  >
    click me !
  </div>

Everything works fine, unless the user clicks on the HTML element before the specified delay has elapsed.

In this case, the GUI is partially modified and the element used to trigger the tooltip is no longer displayed but after the delay, the tooltip is still displayed in the top left corner of the screen.

How to cancel the appearance of the tooltip once the button has been clicked or when the triggering element is no longer displayed ?

My versions are : ng-bootstrap:16.0.0 and angular: 17.1.0

Solution

  • after trying just about everything, I came across this example using ngx-bootstrap tooltip, which explains and simply solves my problem by using this attribute:

    triggers="mouseenter:click mouseenter:mouseleave"

    I tried to replicate it with ng-bootstrap but couldn't.

    So I decided to replace all my tooltips and use ngx-bootstrap instead.