VITEC/VITEC-website
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

SSR cockpit and dashboard tiles: info button with tooltip

Browse Source 
Every tile of the module and the three SSR dashboard widgets has a round question mark button top right. Hovering it or focusing it with the keyboard shows a tooltip that explains what the tile shows. Pure CSS, anchored to the card so it never leaves the tile.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
orascheandClaude Opus 5.5 committed 2026-11-11 11:05:33 +01:00
1 parent 62f3f5394e
commit 994f9f2a1b
7 files changed
+110 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/vitec/Resources/Public/Css/dashboard-ssr.css
+35
View File
@@ -125,6 +125,41 @@ circle.vcw-val.is-ok { stroke: var(--vcw-ok); } circle.vcw-val.is-sky { stroke:
.vcw-link:hover, .vcw-link:focus { color: var(--vcw-orange); text-decoration: underline; }
.vc-widget a:focus-visible { outline: 2px solid var(--vcw-orange); outline-offset: 2px; }
/* Info button with tooltip, top right (pure CSS: hover or keyboard focus). */
.vc-widget { position: relative; }
.vc-widget > .vcw-info + * { padding-right: 32px; }
.vcw-info-btn {
position: absolute; top: 12px; right: 14px; z-index: 6;
display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
border-radius: 50%; border: 1px solid rgba(140, 156, 255, .28);
background: rgba(140, 156, 255, .1); color: var(--vcw-muted);
font-size: 13px; font-weight: 800; line-height: 1; cursor: help;
transition: color .15s, border-color .15s, background-color .15s;
}
.vcw-info:hover .vcw-info-btn, .vcw-info:focus-within .vcw-info-btn {
color: #fff; border-color: var(--vcw-orange); background: rgba(244, 121, 55, .22);
}
.vcw-info-btn:focus-visible { outline: 2px solid var(--vcw-orange); outline-offset: 2px; }
.vcw-tip {
position: absolute; top: 46px; right: 8px; z-index: 5; width: min(320px, calc(100% - 16px));
padding: 12px 14px; border-radius: 10px;
background: #1a2460; border: 1px solid var(--vcw-navy);
box-shadow: 0 14px 36px rgba(0, 0, 0, .5);
color: var(--vcw-text); font-size: 12.5px; font-weight: 400; line-height: 1.55; text-align: left;
opacity: 0; visibility: hidden; transform: translateY(-4px);
transition: opacity .15s, transform .15s, visibility 0s linear .15s;
}
.vcw-tip::before {
content: ""; position: absolute; top: -6px; right: 13px; width: 10px; height: 10px;
background: #1a2460; border-left: 1px solid var(--vcw-navy); border-top: 1px solid var(--vcw-navy);
transform: rotate(45deg);
}
.vcw-tip::after { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.vcw-info:hover .vcw-tip, .vcw-info:focus-within .vcw-tip {
opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
.vcw-pulse::after { animation: none; }
.vcw-tip, .vcw-info-btn { transition: none; }
}