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/Classes/Widgets/CockpitHtml.php
+13 -2
View File
@@ -24,9 +24,20 @@ final class CockpitHtml
return htmlspecialchars($value, ENT_QUOTES);
}
public static function wrap(string $inner): string
/**
* Tile wrapper; $info becomes the round "?" button top right whose
* tooltip explains the tile (CSS only: hover or keyboard focus).
*/
public static function wrap(string $inner, string $info = '', string $id = ''): string
{
return '<div class="vc-widget">' . $inner . '</div>';
$button = '';
if ($info !== '') {
$tipId = 'vcw-tip-' . ($id !== '' ? $id : substr(md5($info), 0, 8));
$button = '<span class="vcw-info"><button type="button" class="vcw-info-btn" aria-label="About this tile"'
. ' aria-describedby="' . $tipId . '">?</button><span class="vcw-tip" role="tooltip" id="' . $tipId . '">'
. self::e($info) . '</span></span>';
}
return '<div class="vc-widget">' . $button . $inner . '</div>';
}
public static function pill(string $tone, string $text, string $title = ''): string