Add delay to ng-bootstrap Tooltip - ng-bootstrap

Question

In contrast to the Bootstrap tooltip, the ng-bootstrap Tooltip for Angular 2 at https://ng-bootstrap.github.io/#/components/tooltip has no provision for a delay, so the tooltip pops up immediately.
I see an issue about this 'ngbTooltip: add new option "delay"' at https://github.com/ng-bootstrap/ng-bootstrap/issues/1052 but it is listed as "No one assigned".
Is there a workaround that could be applied to simple code like https://ng-bootstrap.github.io/app/components/tooltip/demos/basic/plnkr.html to add a delay?
Is there some way of assessing whether a delay capacity is likely to be added to ngbTooltip?

Answer 1

As stated in this comment, you can achieve it 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 it optional, you can define another class such as .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 GitHub feature request at https://github.com/ng-bootstrap/ng-bootstrap/issues/1052 asking for adding delay to ngbTooltip, but so far there is no action on this.

Answer 3

if you want to use S.alems code and make tooltips appearing a little longer (make a delay before appear) everytime with no using javascript or adding and removing classes
you need to just use it like this:
.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;}
}
I did even create account to post this :)

Answer 4

Since version 4.1.0 there is an option to set openDelay and closeDelay. See its documentation.
Values are in ms so to set the open delay to 1 second and close delay to 2 seconds use following code:
<span
ngbtooltip="my tooltip text"
openDelay="1000"
closeDelay="2000">
</span>