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

Question

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

我在 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

如 this comment 中所述，你可以用纯 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;}
}