Status 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

<!--
Snippet Name: Status Tooltip
Description: Status indicator dot with a color-themed tooltip (success, warning, error, info). The tooltip color matches the semantic status. Pure CSS, hover or focus to reveal.
Author: DevSnips Contributors
Usage Example: Add data-tooltip="text" data-tooltip-status="success|warning|error|info" to the status dot button.
-->
<div class="flex items-center gap-5">
  <button type="button" class="tt-status group inline-flex items-center gap-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 rounded-full" data-tooltip="All systems operational" data-tooltip-status="success" aria-label="Status: operational" aria-describedby="tt-st-success">
    <span class="status-dot h-2.5 w-2.5 rounded-full bg-green-500 ring-4 ring-green-100"></span>
    <span class="text-sm font-medium text-gray-700">Operational</span>
  </button>
  <span id="tt-st-success" role="tooltip" class="sr-only">All systems operational</span>

  <button type="button" class="tt-status group inline-flex items-center gap-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 rounded-full" data-tooltip="Degraded performance in EU region" data-tooltip-status="warning" aria-label="Status: warning" aria-describedby="tt-st-warning">
    <span class="status-dot h-2.5 w-2.5 rounded-full bg-amber-500 ring-4 ring-amber-100"></span>
    <span class="text-sm font-medium text-gray-700">Degraded</span>
  </button>
  <span id="tt-st-warning" role="tooltip" class="sr-only">Degraded performance in EU region</span>

  <button type="button" class="tt-status group inline-flex items-center gap-2 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 rounded-full" data-tooltip="API is down — investigating" data-tooltip-status="error" aria-label="Status: error" aria-describedby="tt-st-error">
    <span class="status-dot h-2.5 w-2.5 rounded-full bg-red-500 ring-4 ring-red-100"></span>
    <span class="text-sm font-medium text-gray-700">Down</span>
  </button>
  <span id="tt-st-error" role="tooltip" class="sr-only">API is down — investigating</span>
</div>

<style>
  .tt-status { position: relative; }
  .tt-status::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    transform: translateX(-50%) translateY(4px);
    padding: 6px 10px;
    border-radius: 8px;
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    pointer-events: none;
    z-index: 50;
  }
  .tt-status::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: calc(100% + 4px);
    transform: translateX(-50%) translateY(4px);
    border: 6px solid transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, visibility .15s;
    pointer-events: none;
    z-index: 50;
  }
  /* status theming */
  .tt-status[data-tooltip-status="success"]::after { background: #059669; }
  .tt-status[data-tooltip-status="success"]::before { border-top-color: #059669; }
  .tt-status[data-tooltip-status="warning"]::after { background: #d97706; }
  .tt-status[data-tooltip-status="warning"]::before { border-top-color: #d97706; }
  .tt-status[data-tooltip-status="error"]::after { background: #dc2626; }
  .tt-status[data-tooltip-status="error"]::before { border-top-color: #dc2626; }
  .tt-status[data-tooltip-status="info"]::after { background: #2563eb; }
  .tt-status[data-tooltip-status="info"]::before { border-top-color: #2563eb; }
  /* reveal */
  .tt-status:hover::after, .tt-status:focus-visible::after {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
  }
  .tt-status:hover::before, .tt-status: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

# Status Tooltip

Status-styled tooltip.

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

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