Add optional delay to `Tooltip`s

[multiwebinc]

As it is, tooltips show up (or begin to show up) immediately on mouse over. I propose adding a delay attribute to the Tooltip component that will delay showing by that many milliseconds.

[robbyevans]

hello, @rluders @multiwebinc, I would love to solve this issue.

[tulup-conner]

@robbyevans Are you still able to resolve this?

[robbyevans]

@tulup-conner yes I am available

[CharlesIrvineKC]

I am also wanting to delay the tooltip popup for the component taken from https://flowbite.com/docs/components/tooltips/:

<button data-tooltip-target="tooltip-default" type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Default tooltip</button>
<div id="tooltip-default" role="tooltip" class="absolute z-10 invisible inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700">
    Tooltip content
    <div class="tooltip-arrow" data-popper-arrow></div>
</div>

[jam3smay]

I'd also love to see this solved with a delay prop or something like trigger="hover:delay-500". Without the ability to configure a delay, this component is useless for my use cases at least. Thnx.

[victorfunes]

This can be solved adding a delay in the theme in the animation. Just as an example try this:

animation: "transition-opacity delay-700",

If you want this behabiour always, define your own CustomFlowbiteTheme, otherwise, the component allows you to use the theme property.