Question

与Bootstrap工具提示相比，https://ng-bootstrap.github.io/#/components/tooltip处的Ang-bootstrap for Angular 2没有提供延迟，因此工具提示会立即弹出。

我发现有关此问题的问题：ngbTooltip：添加新选项＆＃34;延迟＆＃34;＆＃39;在https://github.com/ng-bootstrap/ng-bootstrap/issues/1052，但它列为＆＃34;没有人分配＆＃34;。

是否有可以应用于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;}
}

Answer 2

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

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

我甚至创建了帐户来发布此内容：）

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

3 个答案: