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

Question

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

我在 https://github.com/ng-bootstrap/ng-bootstrap/issues/1052 看到一个关于此 'ngbTooltip: add new option "delay"' 的问题，但它被列为 "No one assigned"。

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

是否有某种方法可以评估是否有可能向 ngbTooltip 添加延迟容量？

Answer 1

在 https://github.com/ng-bootstrap/ng-bootstrap/issues/1052 有一个 GitHub 功能请求要求为 ngbTooltip 添加延迟，但到目前为止还没有对此采取任何行动。

Answer 2

如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;}
}

如果你想让它成为可选的，你可以定义另一个class比如.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;}
}

Answer 3

如果你想使用 S.alems 代码并使工具提示每次出现的时间更长（在出现之前延迟）而不使用 javascript 或添加和删除类你需要像这样使用它：

.tooltip.bottom.in.fade{
animation-name: delayedFadeIn;
animation-duration: 1.1s; /* Adjust this duration */
}

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

我什至为 post 创建了这个 :)

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

Add delay to ng-bootstrap Tooltip

ng-bootstrap