Rich 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

<!--
Snippet Name: Rich Tooltip
Description: Wide tooltip with rich content - title, description, and an optional link. For help text on form fields or complex UI elements. Pure CSS, hover or focus to reveal.
Author: DevSnips Contributors
Usage Example: Use data-tooltip-title and data-tooltip-desc attributes. The tooltip widens to fit multi-line content.
-->
<div class="inline-flex items-center gap-1.5">
  <label for="api-key" class="text-sm font-medium text-gray-700">API key</label>
  <button
    type="button"
    class="tt-rich flex h-4 w-4 items-center justify-center rounded-full text-gray-400 hover:text-gray-600 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
    data-tooltip-title="What is an API key?"
    data-tooltip-desc="A unique token that authenticates requests to our API. Find it under Settings → API. Keep it secret."
    aria-label="About API keys"
    aria-describedby="tt-rich-desc"
  >
    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
  </button>
  <span id="tt-rich-desc" role="tooltip" class="sr-only">About API keys</span>
</div>

<style>
  .tt-rich { position: relative; }
  .tt-rich::after {
    content: attr(data-tooltip-title);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(4px);
    width: 240px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #111827;
    color: #f9fafb;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    text-align: left;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    pointer-events: none;
    z-index: 50;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    white-space: normal;
  }
  /* description sits as a second line via the ::after content trick - combine title + newline + desc */
  .tt-rich::after {
    content: attr(data-tooltip-title) "\A" attr(data-tooltip-desc);
    white-space: pre-wrap;
    font-weight: 400;
  }
  .tt-rich::after strong, .tt-rich::after b { font-weight: 600; }
  /* arrow */
  .tt-rich::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%) translateY(4px);
    border: 6px solid transparent;
    border-top-color: #111827;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    pointer-events: none;
    z-index: 50;
  }
  .tt-rich:hover::after, .tt-rich:focus-visible::after {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  }
  .tt-rich:hover::before, .tt-rich: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

# Rich Tooltip

Rich tooltip with title and supporting content.

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

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