HubSpot/tooltip

Delay

Closed this issue · 1 comments

A delay option would be nice to only show the tooltip after a certain period of time has passed hovering over an element.

Thanks for using Tooltip! At the moment, we currently don't have a way to programmatically induce a delay from Javascript, but you can do this fairly easily using CSS. Here's an example of a 400ms delay before opening with a 1s fade-in, and immediately disappearance:

.tooltip-element{
  opacity: 0
}

.tooltip-element.tooltip-open-transitionend {
  display: block;
}
.tooltip-element.tooltip-after-open {
  transition: opacity 1s 400ms;
  opacity: 1;
}

It's not in the tooltip documentation, but you can actually do most things that drop can (the underlying library that implements tooltip). The example above is basically taken from the drop documentation with drop being replaced with tooltip as the CSS class prefix.

Let me know if this helps and if you have more questions, I'll be more than happy to help 😸