如何推迟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 { }