带有延迟 ngx-bootstrap 的手动触发工具提示

时间:2021-06-21 18:49:26

标签: angular ngx-bootstrap

我尝试通过其父 div 打开/关闭工具提示。不幸的是,这在使用延迟时不起作用。调试我的应用程序显示,manuel 触发 show()close() 不会检查延迟。

触发它可以完美地处理它。正如您在复制中看到的,我想在您将鼠标悬停在父级上时触发工具提示。

https://stackblitz.com/edit/angular-wh3uem?file=app/triggers-manual.html

尝试快速进入和离开粉红色容器。它将坚持启用的工具提示。

1 个答案:

答案 0 :(得分:0)

好像手动触发一个Tooltip基本不能处理这个功能。但是,我自己实现了延迟功能。

// Check if there is currently an ongoing timeout
if(!this._runningTimeout) {
  this._runningTimeout = true;
  this._timeoutRef = setTimeout(() => {
    tooltip.show();
  }, 500);
} else {
  clearTimeout(this._timeoutRef);
  this._runningTimeout = false;
  tooltip.hide();
}

并在模板中的 (mouseenter)="..."(mouseleave)="..." 上触发此函数。