Icon 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

<!--
Snippet Name: Icon Tooltip
Description: Tooltip on an icon-only button - the key accessibility use case where the tooltip serves as the visible label. Includes aria-label and role=tooltip. Pure CSS.
Author: DevSnips Contributors
Usage Example: Icon buttons need labels. Add data-tooltip="label" so hover/focus reveals it.
-->
<div class="flex items-center gap-2">
  <button
    type="button"
    class="tt-icon flex h-9 w-9 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
    data-tooltip="Share"
    aria-label="Share"
    aria-describedby="tt-icon-share"
  >
    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z"/></svg>
  </button>
  <span id="tt-icon-share" role="tooltip" class="sr-only">Share</span>

  <button
    type="button"
    class="tt-icon flex h-9 w-9 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
    data-tooltip="Settings"
    aria-label="Settings"
    aria-describedby="tt-icon-settings"
  >
    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg>
  </button>
  <span id="tt-icon-settings" role="tooltip" class="sr-only">Settings</span>

  <button
    type="button"
    class="tt-icon flex h-9 w-9 items-center justify-center rounded-lg text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
    data-tooltip="Delete"
    aria-label="Delete"
    aria-describedby="tt-icon-delete"
  >
    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
  </button>
  <span id="tt-icon-delete" role="tooltip" class="sr-only">Delete</span>
</div>

<style>
  .tt-icon { position: relative; }
  .tt-icon::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    padding: 5px 9px;
    border-radius: 6px;
    background: #111827;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    pointer-events: none;
    z-index: 50;
  }
  .tt-icon::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 2px);
    transform: translateX(-50%) translateY(4px);
    border: 5px solid transparent;
    border-top-color: #111827;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s;
    pointer-events: none;
    z-index: 50;
  }
  .tt-icon:hover::after, .tt-icon:focus-visible::after {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  }
  .tt-icon:hover::before, .tt-icon:focus-visible::before {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  }
</style>

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

# Icon Tooltip

Tooltip anchored to an icon button.

## Usage
```bash
npx devsnips add Tailwind/Components/Tooltips/icon-tooltip
```
Copy from `code.html`. Ensure the trigger has an accessible name.

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