devsnips
Search docs, APIs, guides…

Component

Delayed Tooltip

Tooltip that waits 600ms before appearing on hover so quick mouse-overs don't flicker, then hides instantly on exit. Uses CSS transition-delay - no JavaScript timers. Appears instantly on keyboard focus.

  • Component
  • Tailwind
  • HTML
  • MIT

What it does

Capabilities

  • 600ms show delay
  • Instant hide on exit
  • Instant on keyboard focus
  • Transition-delay driven
  • Pure CSS no JS
  • Role=tooltip
  • Aria-describedby

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/tooltips/delayed-tooltip/
fluid · no fixed width 100%
No dependencies Keyboard-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Tooltips/delayed-tooltip
registry path: Tailwind/Components/Tooltips/delayed-tooltip

Source

Implementation

code.html 
<!--
Snippet Name: Delayed Tooltip
Description: Tooltip that appears after a hover delay using CSS transition-delay, so quick mouse-overs don't flicker. Pure CSS, no JavaScript.
Author: DevSnips Contributors
Usage Example: Add data-tooltip="text" and the class .tt-delayed. Delay is 600ms on show; immediate on hide.
-->
<button
  type="button"
  class="tt-delayed inline-flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
  data-tooltip="This tooltip waits 600ms before appearing"
  aria-describedby="tt-delayed-desc"
>
  Hover slowly
</button>
<span id="tt-delayed-desc" role="tooltip" class="sr-only">This tooltip waits 600ms before appearing</span>

<style>
  .tt-delayed { position: relative; }
  .tt-delayed::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(4px);
    padding: 6px 10px;
    border-radius: 8px;
    background: #1d4ed8;
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    /* 600ms delay before showing, 0ms delay when hiding (no flicker on exit) */
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    transition-delay: 600ms;
    pointer-events: none;
    z-index: 50;
  }
  .tt-delayed::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%) translateY(4px);
    border: 6px solid transparent;
    border-top-color: #1d4ed8;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s;
    transition-delay: 600ms;
    pointer-events: none;
    z-index: 50;
  }
  .tt-delayed:hover::after, .tt-delayed:focus-visible::after {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  }
  .tt-delayed:hover::before, .tt-delayed:focus-visible::before {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  }
  /* No delay on exit - reset so it hides immediately when the pointer leaves */
  .tt-delayed:not(:hover):not(:focus-visible)::after,
  .tt-delayed:not(:hover):not(:focus-visible)::before {
    transition-delay: 0ms;
  }
</style>
67 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/tooltips/delayed-tooltip
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/tooltips/delayed-tooltip/

Install: npx devsnips add
Tailwind/Components/Tooltips/delayed-tooltip

This is the Delayed Tooltip — Tooltip that waits 600ms before appearing on hover so quick mouse-overs don't flicker, then hides instantly on exit. Uses CSS transition-delay - no JavaScript timers. Appears instantly on keyboard focus.

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://components/tooltips/delayed-tooltip