为 ng-bootstrap 工具提示添加延迟

Question

与 Bootstrap 工具提示相反，https: //ng-bootstrap.github.io/#/components/tooltip上的 Angular 2 的 ng-bootstrap 工具提示没有延迟的规定，因此工具提示会立即弹出。

我在https://github.com/ng-bootstrap/ng-bootstrap/issues/1052上看到有关“ngbTooltip：添加新选项“延迟””的问题，但它被列为“无人分配”。

是否有一种解决方法可以应用于https://ng-bootstrap.github.io/app/components/tooltip/demos/basic/plnkr.html等简单代码来添加延迟？

是否有某种方法可以评估延迟能力是否可能添加到 ngbTooltip 中？

Answer 1

正如此评论中所述，您可以使用纯 css 来实现它：

.tooltip > div {
  animation-name: delayedFadeIn;
  animation-duration: 1s; /* Adjust this duration */
}

@Keyframes delayedFadeIn {
  0% {opacity: 0;}
  75% {opacity: 0;} /* Set this to 99% for no fade-in. */
  100% {opacity: 1;}
}

如果你想让它成为可选的，你可以定义另一个类，例如.delayed：

.delayed.tooltip > div {
  animation-name: delayedFadeIn;
  animation-duration: 1s; /* Adjust this duration */
}

@Keyframes delayedFadeIn {
  0% {opacity: 0;}
  75% {opacity: 0;} /* Set this to 99% for no fade-in. */
  100% {opacity: 1;}
}