feat: Add support for tooltips - #43
Draft
kitschpatrol wants to merge 9 commits into
Draft
Conversation
kitschpatrol
force-pushed
the
tooltips
branch
3 times, most recently
from
September 8, 2026 19:09
83ff887 to
ebff263
Compare
Add accessible control descriptions Refine description hint behavior Add title fallback for descriptions Enable native titles alongside description hints Limit description hover targets Align description hints with cursor Left-align description hints Fade out description hints Match Tweakpane tooltip theming Add origin caret to description hints Increase unlabeled tooltip offset Adapt tooltip gap to cursor style Distinguish label text cursor offsets Add configurable description theming Narrow description theme API Refine description hover targets Scale descriptions with panes Normalize description gaps across browser zoom Change test example. Polish description interaction and styling Fix descriptions loaded at browser zoom Anchor descriptions vertically Refine description affordances and focus Anchor focused descriptions to labels Keep descriptions hidden during keyboard focus Polish description icon and clearance Align description affordance Bridge description affordance hover gap Update description behavior docs Add theme-controlled description hints Move description hover delay to CSS Simplify description tooltips and fix hover behavior. Use implicit CSS anchors and native popovers, with delayed opening, persistent Escape dismissal, and a complete hover bridge. Preserve accessible descriptions through control replacement and use a manual popover where hint popovers are unavailable. Use CSS zoom so pane layout and top-layer descriptions share the same scale, removing the draggable pane's duplicate height calculation. Update documentation and add browser regressions for hover, dismissal, scaling, and lifecycle behavior. Validation: 87 tooltip checks passed across Chromium, Firefox, and WebKit. The full browser suite passed 395 checks; its remaining ambiguous title selector was corrected and all 9 checks in that file passed on rerun. Svelte checks, lint, formatting, and the production build passed. The build used a temporary pnpm wrapper to keep version warnings out of generated license JSON. Restore horizontal cursor positioning for description tooltips. Track the pointer's horizontal coordinate while hovering the trigger, and hold the tooltip still when the pointer enters it. Use CSS for vertical anchoring, flipping, and viewport clamping, with a ResizeObserver supplying the tooltip width as its content changes. Cover pointer movement during and after the hover delay, entering the tooltip, scaled positioning, viewport corners, and content resizing in Chromium, Firefox, and WebKit. Update the description documentation. Pin description tooltips to their opening cursor position. Capture the horizontal pointer position when the hover delay completes and keep it fixed while the tooltip is open. A fresh hover captures a new offset. Update the documentation and browser regressions for stationary tooltips, reopening, and hover-gap traversal. Restore carets on description tooltips. Restore the theme-matched caret at the pinned cursor position, keeping it inside the tooltip edges and on the side facing the label. Refresh its placement on opening, pane or tooltip resize, viewport resize, and scrolling while CSS continues to position the tooltip. Cover caret placement at pane scale, viewport corners, and live vertical flips, and retain the stationary cursor behavior. Update the description documentation. Clean deep. Increase description tooltip padding by one pixel. Slightly increase description tooltip line height. Use themed horizontal padding for description tooltips. Use container theme padding for description tooltips. Fix raw tooltip theme overrides and refresh style checks. Tweaks. Tweaks. Update dependencies. Prep for pre-release.
kitschpatrol
force-pushed
the
tooltips
branch
from
September 8, 2026 19:56
1de2c16 to
0c3a54f
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Adds a new
descriptionprop to most components to add support for on-hover tooltip-like extended descriptions of a particular control's nuances or purpose.Also related:
This is a work in progress, but if anyone wants the new component right away, it's available as a preview release on NPM:
Please comment on this PR if you have any suggestions or improvements.
I don't love reimplementing so much of the browser's native
title-based tooltip functionality, but the custom implementation lets us control the time-until-reveal, match the style of the active Tweakpane theme, improve accessibility, and optionally support rich text.