How to delay the ngx-bootstrap tooltip?

Question

Is there a way to delay the removal of the tooltip on mouse out?
I am using it in a span:

<span [tooltip]="tolTemplate"></span>
<ng-template #tolTemplate>
  <div [innerHtml]="helpText"></div>
</ng-template>

Answer 1

You can inspire here. It is my solution in Angular CLI.

app.component.html

<div class="container">
      <h1>Popovers</h1>
      <p>
        <span popover="Hello there! I was triggered manually"
              #pop="bs-popover">
        This text has attached popover
        </span>
      </p>

      <button type="button" class="btn btn-success" (mouseenter)="delayedPopover(pop)" (mouseleave)="stopPopover(pop)">
        Show
      </button>        
</div>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {     
  delayPop;
  popHide;

  delayedPopover(pop) {
    this.delayPop = setTimeout(() => {
      pop.show();
    }, 1000);
  }
  stopPopover(pop) {
    this.popHide = setTimeout(() => {
      pop.hide();
    }, 1000);
    clearTimeout(this.delayPop);
  }
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { PopoverModule } from 'ngx-bootstrap/popover';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    PopoverModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 2

You can use input property tooltipFadeDuration (default value is 150ms) but it will work only with “manual” triggering of the tooltip:

<button
  #tlt="bs-tooltip"
  triggers=""
  tooltipFadeDuration=500
  (mouseenter)="tlt.show()"
  (mouseleave)="tlt.hide()"
  [tooltip]="tooltipText"> Button with tooltip
</button>