global tooltip system, migrate all title attrs to data-tip/data-help

New tooltip.js module with styled tooltips (data-tip) and multi-line
inline help (data-help). Migrates all ~70 native title attributes
across index.php, JS modules, and all plugins. Adds inline help on
9 strategic UI elements (split, superview, zen, extract, assets, etc).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
thandClaude Opus 4.6 committed 2026-04-12 19:55:17 +02:00
1 parent 527305355c
commit f465306c1d
21 files changed
+229 -109

No files matched your search

+4 -4
View File
@@ -433,7 +433,7 @@ function renderSidebar(card) {
<span class="w-2 h-2 rounded-full shrink-0" style="background:${gc.color}"></span>
${img ? `<span class="w-6 h-6 rounded-full shrink-0 bg-cover bg-center border border-t-border" style="background-image:url('${img}')"></span>` : ''}
<span class="font-pixel text-[10px] ${active ? 'text-t-bright' : 'text-t-muted'} truncate flex-1">${esc(gc.title)}</span>
<button onclick="event.stopPropagation();window._ungroupCard(${gc.id})" class="text-t-dim hover:text-t-danger transition-colors shrink-0 ${gc.id == groupCards[0]?.id ? 'invisible' : ''}" title="ungroup">
<button onclick="event.stopPropagation();window._ungroupCard(${gc.id})" class="text-t-dim hover:text-t-danger transition-colors shrink-0 ${gc.id == groupCards[0]?.id ? 'invisible' : ''}" data-tip="ungroup">
<i class="ph ph-x text-[10px]"></i>
</button>
</div>`;
@@ -554,7 +554,7 @@ function applyReadingResizeHandles(root) {
const line = document.createElement('button');
line.type = 'button';
line.className = 'detail-font-dragline';
line.title = 'drag to resize text';
line.dataset.tip = 'drag to resize text';
line.setAttribute('aria-label', 'resize text');
el.appendChild(line);
@@ -615,7 +615,7 @@ export function bindDetailImageFullscreen(root) {
// Regular images: double-click, no gallery nav
root.querySelectorAll('img').forEach(img => {
if (img.closest('.md-gallery')) return;
img.title = 'double-click to open fullscreen';
img.dataset.tip = 'double-click to fullscreen';
img.addEventListener('dblclick', e => {
e.preventDefault();
e.stopPropagation();
@@ -898,7 +898,7 @@ function loadSplitCard(id) {
<button id="split-back" class="flex items-center gap-1.5 flex-1 px-3 py-2 text-xs text-t-muted hover:text-t-accent hover:bg-t-raised transition-colors">
<i class="ph ph-arrow-left text-sm"></i><span class="font-pixel text-[10px]">${splitLastQuery ? 'results' : 'related cards'}</span>
</button>
<button id="split-promote" class="flex items-center gap-1.5 px-3 py-2 text-xs text-t-muted hover:text-t-accent hover:bg-t-raised transition-colors" title="open as main card">
<button id="split-promote" class="flex items-center gap-1.5 px-3 py-2 text-xs text-t-muted hover:text-t-accent hover:bg-t-raised transition-colors" data-tip="open as main card">
<i class="ph ph-arrow-line-left text-sm"></i><span class="font-pixel text-[10px]">Focus</span>
</button>
</div>`;