ngx-bootstrapのツールチップを遅らせる方法は？

Question

マウスのツールチップの削除を遅らせる方法はありますか？
私はスパンでそれを使用しています：

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

Answer 1

あなたがここに鼓舞することができます。 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 { }