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>

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

您可以使用输入属性tooltipFadeDuration（默认值为 150 毫秒），但它仅适用于工具提示的“手动”触发：

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