CODEWITHSUNDEEP
ng-bootstrap
Mickey Segal
Mickey Segal

Reputation: 841

Add delay to ng-bootstrap Tooltip

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?

Upvotes: 6

Views: 5828

Answers (4)

michal.jakubeczy
michal.jakubeczy

Reputation: 9469

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>

Upvotes: 0

Maciej B
Maciej B

Reputation: 21

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 :)

Upvotes: 1

s.alem
s.alem

Reputation: 13079

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

Upvotes: 3

Mickey Segal
Mickey Segal

Reputation: 841

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.

Upvotes: 1

Related Questions