Delayed Tooltip

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

<!--
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>

1
2
3
4
5
6
7
8
9
10
11
12

# Delayed Tooltip

Tooltip with show delay.

## Usage
```bash
npx devsnips add Tailwind/Components/Tooltips/delayed-tooltip
```
Copy from `code.html`.

## File Structure
`code.html` · `preview.html` · `metadata.json` · `README.md`