angular - 如何延迟 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>

应用程序组件.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);
  }
}

应用程序模块.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 { }