diff --git a/public/push.ts b/public/push.ts index e55109c..650698f 100644 --- a/public/push.ts +++ b/public/push.ts @@ -319,9 +319,9 @@ function renderToggleButton( ) btn.innerHTML = ICON_BELL btn.append(' ' + (isSubscribed ? 'On' : 'Off')) - btn.title = isSubscribed - ? 'Click to disable push notifications' - : 'Click to enable push notifications' + btn.dataset.tip = isSubscribed + ? 'Notifications on — tap to turn off' + : 'Notifications off — tap to turn on' btn.setAttribute('aria-pressed', isSubscribed ? 'true' : 'false') btn.addEventListener('click', () => { diff --git a/public/style.css b/public/style.css index e642140..751aba3 100644 --- a/public/style.css +++ b/public/style.css @@ -1562,3 +1562,33 @@ body.home-open #term { font-size: 11px; color: var(--text-faint); } + +/* v0.7: styled hover tooltip on the timeline + push buttons (like .toolbtn). + Left-anchored — these sit on the left side of the tab bar. */ +.tab-timeline, +.push-toggle-btn { + position: relative; +} +.tab-timeline[data-tip]::after, +.push-toggle-btn[data-tip]::after { + content: attr(data-tip); + position: absolute; + top: calc(100% + 6px); + left: 0; + white-space: nowrap; + background: var(--surface-3); + color: var(--text); + border: 1px solid var(--border-strong); + padding: 4px 8px; + border-radius: 6px; + font-size: 12px; + font-weight: 500; + opacity: 0; + pointer-events: none; + transition: opacity 0.12s ease; + z-index: 60; +} +.tab-timeline[data-tip]:hover::after, +.push-toggle-btn[data-tip]:hover::after { + opacity: 1; +} diff --git a/public/tabs.ts b/public/tabs.ts index edb3142..703969c 100644 --- a/public/tabs.ts +++ b/public/tabs.ts @@ -855,7 +855,7 @@ export class TabApp { const tl = document.createElement('button') tl.className = 'tab-timeline' tl.innerHTML = ICON_TIMELINE - tl.title = 'Activity timeline' + tl.dataset.tip = 'Activity timeline' tl.setAttribute('aria-label', 'Activity timeline') tl.classList.toggle('active', this.timelineOpen) tl.addEventListener('click', () => this.toggleTimeline())