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/backend-ssr.css
+38
View File
@@ -224,6 +224,44 @@
.vc-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.vc-stack { margin: 10px 0 0; background: var(--vc-ink); border: 0; border-radius: 8px; padding: 10px 12px; font: 11.5px/1.55 var(--vc-mono); color: #b9c1ef; overflow: auto; max-height: 320px; white-space: pre; }
/* Info button with tooltip, top right in every card (pure CSS: hover
or keyboard focus shows the text). */
.vc-card { position: relative; }
.vc-card-h { padding-right: 34px; }
.vc-hero-top { padding-right: 34px; }
/* Button and tooltip are placed against the card, so the tooltip never
gets wider than its card or leaves the module at the left edge. */
.vc-info-btn {
position: absolute; top: 14px; right: 14px; z-index: 21;
display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
border-radius: 50%; border: 1px solid var(--vc-line-strong);
background: rgba(140, 156, 255, .1); color: var(--vc-muted);
font-size: 13px; font-weight: 800; line-height: 1; cursor: help;
transition: color .15s, border-color .15s, background-color .15s;
}
.vc-info:hover .vc-info-btn, .vc-info:focus-within .vc-info-btn {
color: #fff; border-color: var(--vc-orange); background: rgba(244, 121, 55, .22);
}
.vc-tip {
position: absolute; top: 48px; right: 8px; z-index: 20; width: min(320px, calc(100% - 16px));
padding: 12px 14px; border-radius: 10px;
background: #1a2460; border: 1px solid var(--vc-navy-hi);
box-shadow: 0 14px 36px rgba(0, 0, 0, .5);
color: var(--vc-text); font-size: 12.5px; font-weight: 400; line-height: 1.55;
letter-spacing: 0; text-transform: none; text-align: left; white-space: normal;
opacity: 0; visibility: hidden; transform: translateY(-4px);
transition: opacity .15s, transform .15s, visibility 0s linear .15s;
}
.vc-tip::before {
content: ""; position: absolute; top: -6px; right: 13px; width: 10px; height: 10px;
background: #1a2460; border-left: 1px solid var(--vc-navy-hi); border-top: 1px solid var(--vc-navy-hi);
transform: rotate(45deg);
}
.vc-tip::after { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }
.vc-info:hover .vc-tip, .vc-info:focus-within .vc-tip {
opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
.vitec-cockpit *, .vitec-cockpit *::after { animation: none !important; transition: none !important; }
}