Add delay to ng-bootstrap Tooltip

Question

Unlike Bootstrap tooltip, the ng-bootstrap tooltip for Angular 2 in https://ng-bootstrap.imtqy.com/#/components/tooltip does not provide a delay, so the tooltip appears immediately.

I see a problem with this' ngbTooltip: add a new "delay" option to https://github.com/ng-bootstrap/ng-bootstrap/issues/1052 , but it is listed as "No one is assigned."

Is there a workaround that can be applied to simple code like https://ng-bootstrap.imtqy.com/app/components/tooltip/demos/basic/plnkr.html to add a delay?

Is there any way to evaluate if adding delay to ngbTooltip is possible?

Answer 1

As pointed out in this comment , you can achieve this with pure 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;}
}

If you want to make this optional, you can define another class, for example .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

There is a request to the GitHub function at https://github.com/ng-bootstrap/ng-bootstrap/issues/1052 asking to add a delay to ngbTooltip, but so far there has been no action on this.

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

, :)