Meta: add `tooltipped` and `addToolTip` helpers by Copilot · Pull Request #9449 · refined-github/refined-github

Copilot · 2026-05-13T10:29:52Z

Replaces repetitive manual UUID wiring + <tool-tip> JSX boilerplate with two focused utility functions. Previously each usage required two crypto.randomUUID() calls, manual id/for/aria-labelledby linking, and ~12 lines of JSX per tooltip.

New helpers: `source/helpers/tooltip.tsx`

tooltipped(content, element) — for building JSX trees with new elements. Returns [element, tooltip] as a tuple for direct inline embedding:

return <div>{tooltipped('Does something', <button type="button">…</button>)}</div>;

// With options:
return <div>{tooltipped({ label: 'Does something', shortcut: 'g b', direction: 'n' }, <button type="button">…</button>)}</div>;

// Inline ternary:
return <div>{shouldHaveTooltip ? tooltipped('Label', button) : button}</div>;

addToolTip(content, element) — for elements already in the DOM. Inserts the tooltip immediately after the element and returns void. Throws if the element has no parent node (use tooltipped instead):

addToolTip('Does something', button);
addToolTip({ label: 'Does something', shortcut: 'g b', direction: 'n' }, button);

Both helpers:

Auto-assign an id to the element if absent
Set aria-labelledby on the element pointing to the tooltip
Render shortcut keys as <kbd> elements ('g b' → <kbd>g</kbd> <kbd>b</kbd>)

Refactored

update-pr-from-base-branch.tsx — <button> inlined directly into tooltipped(), no intermediate const
table-input.tsx — <summary> inlined directly into tooltipped() inside the <details> JSX tree
unwrap-unnecessary-dropdowns.tsx — tooltipped used inline via ternary expression

Type

globals.d.ts: added for?: string to tool-tip JSX intrinsic type

Test URLs

Screenshot

AI GOT NO EYES

Agent-Logs-Url: https://github.com/refined-github/refined-github/sessions/1965ca98-3688-4757-99bb-0b656a9ee0c1 Co-authored-by: fregante <1402241+fregante@users.noreply.github.com>

…rtions Agent-Logs-Url: https://github.com/refined-github/refined-github/sessions/1965ca98-3688-4757-99bb-0b656a9ee0c1 Co-authored-by: fregante <1402241+fregante@users.noreply.github.com>

…pacing Agent-Logs-Url: https://github.com/refined-github/refined-github/sessions/1965ca98-3688-4757-99bb-0b656a9ee0c1 Co-authored-by: fregante <1402241+fregante@users.noreply.github.com>

… before shortcuts Agent-Logs-Url: https://github.com/refined-github/refined-github/sessions/1965ca98-3688-4757-99bb-0b656a9ee0c1 Co-authored-by: fregante <1402241+fregante@users.noreply.github.com>

…ng DOM elements Agent-Logs-Url: https://github.com/refined-github/refined-github/sessions/80d53c48-921e-4da6-ab3a-998c4453d3ad Co-authored-by: fregante <1402241+fregante@users.noreply.github.com>

Agent-Logs-Url: https://github.com/refined-github/refined-github/sessions/1e4272d0-d45e-4e05-9dfd-f4846d66cfab Co-authored-by: fregante <1402241+fregante@users.noreply.github.com>

fregante

Adding tooltips is now much quicker:

I'll ask to use this for other features like unread-anywhere in a followup PR

Agent-Logs-Url: https://github.com/refined-github/refined-github/sessions/d3b309f7-fd60-42d5-b103-135bcb248ab0 Co-authored-by: fregante <1402241+fregante@users.noreply.github.com>

SunsetTechuila · 2026-05-13T13:20:32Z

+	element.id ||= crypto.randomUUID();
+
+	const tooltipId = crypto.randomUUID();
+	element.setAttribute('aria-labelledby', tooltipId);


Not sure we always want that, but ok for now

SunsetTechuila · 2026-05-13T15:04:10Z

Before	After

Reference:

Co-authored-by: Grigory <grigory.orlov.set@gmail.com>

SunsetTechuila · 2026-05-13T15:08:17Z

+	padding: var(--base-size-2, 0.125rem);
+	line-height: var(--base-size-8, 0.5rem);
+	min-width: var(--base-size-16, 1rem);


I don't think we should use fuchsia-like fallbacks here. If our styles are automatically adapted, good. If not, that's fine too.

Only because it's a lot of values and it's easier to just keep the whole block in sync.

But in practice fuchsia is exactly the notification we need to force us to update the whole rule when it becomes outdated.

fregante · 2026-05-13T15:26:20Z

Good changes 👌

fregante · 2026-05-13T15:24:46Z

+	padding: var(--base-size-2, 0.125rem);
+	line-height: var(--base-size-8, 0.5rem);
+	min-width: var(--base-size-16, 1rem);


Only because it's a lot of values and it's easier to just keep the whole block in sync.

But in practice fuchsia is exactly the notification we need to force us to update the whole rule when it becomes outdated.

SunsetTechuila · 2026-05-13T15:41:03Z

Handy helpers: easy to use and make updates and migrations easier. Good job

fregante · 2026-05-13T15:45:38Z

🙌 there's a PR coming to attempt an automated upgrade. Let's see how that goes

Update tooltips style to integrate better #9451

Initial plan

8cb4c0c

Copilot AI assigned Copilot and fregante May 13, 2026

Copilot started work on behalf of fregante May 13, 2026 10:29 View session

Copilot AI linked an issue May 13, 2026 that may be closed by this pull request

Add helper to use the new tool-tip element #9448

Closed

Copilot AI and others added 4 commits May 13, 2026 10:39

feat: add addToolTip helper and refactor existing tooltip usages

602dc76

Agent-Logs-Url: https://github.com/refined-github/refined-github/sessions/1965ca98-3688-4757-99bb-0b656a9ee0c1 Co-authored-by: fregante <1402241+fregante@users.noreply.github.com>

fix: use isConnected guard in addToolTip to avoid unexpected DOM inse…

985fa42

…rtions Agent-Logs-Url: https://github.com/refined-github/refined-github/sessions/1965ca98-3688-4757-99bb-0b656a9ee0c1 Co-authored-by: fregante <1402241+fregante@users.noreply.github.com>

docs: clarify aria-labelledby behavior in addToolTip JSDoc; fix JSX s…

bc3d299

…pacing Agent-Logs-Url: https://github.com/refined-github/refined-github/sessions/1965ca98-3688-4757-99bb-0b656a9ee0c1 Co-authored-by: fregante <1402241+fregante@users.noreply.github.com>

fix: remove leading space from renderShortcut, add explicit separator…

3c2a560

… before shortcuts Agent-Logs-Url: https://github.com/refined-github/refined-github/sessions/1965ca98-3688-4757-99bb-0b656a9ee0c1 Co-authored-by: fregante <1402241+fregante@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Add helper to use the new tool-tip element~~ Add addToolTip helper for the tool-tip custom element May 13, 2026

Copilot AI requested a review from fregante May 13, 2026 10:48

Copilot finished work on behalf of fregante May 13, 2026 10:48

fregante requested changes May 13, 2026

View reviewed changes

Comment thread source/features/update-pr-from-base-branch.tsx Outdated

Comment thread source/helpers/tooltip.tsx Outdated

Copilot started work on behalf of fregante May 13, 2026 12:29 View session

refactor: split into tooltipped() for JSX and addToolTip() for existi…

63a0882

…ng DOM elements Agent-Logs-Url: https://github.com/refined-github/refined-github/sessions/80d53c48-921e-4da6-ab3a-998c4453d3ad Co-authored-by: fregante <1402241+fregante@users.noreply.github.com>

Copilot AI changed the title ~~Add addToolTip helper for the tool-tip custom element~~ Add tooltipped and addToolTip helpers for the tool-tip custom element May 13, 2026

Copilot finished work on behalf of fregante May 13, 2026 12:37

Copilot AI requested a review from fregante May 13, 2026 12:37

fregante requested changes May 13, 2026

View reviewed changes

Comment thread source/features/table-input.tsx Outdated

Comment thread source/features/unwrap-unnecessary-dropdowns.tsx Outdated

Comment thread source/features/update-pr-from-base-branch.tsx Outdated

Copilot started work on behalf of fregante May 13, 2026 12:40 View session

refactor: use tooltipped inline in all three features

944b74b

Agent-Logs-Url: https://github.com/refined-github/refined-github/sessions/1e4272d0-d45e-4e05-9dfd-f4846d66cfab Co-authored-by: fregante <1402241+fregante@users.noreply.github.com>

Copilot finished work on behalf of fregante May 13, 2026 12:45

Copilot AI requested a review from fregante May 13, 2026 12:45

github-actions Bot added the meta Related to Refined GitHub itself label May 13, 2026

fregante changed the title ~~Add tooltipped and addToolTip helpers for the tool-tip custom element~~ Meta: add tooltipped and addToolTip helper May 13, 2026

fregante changed the title ~~Meta: add tooltipped and addToolTip helper~~ Meta: add tooltipped and addToolTip helpers May 13, 2026

fregante requested changes May 13, 2026

View reviewed changes

Comment thread source/helpers/tooltip.tsx

Comment thread source/helpers/tooltip.tsx

Copilot started work on behalf of fregante May 13, 2026 13:01 View session

fregante approved these changes May 13, 2026

View reviewed changes

fregante requested a review from SunsetTechuila May 13, 2026 13:03

fregante marked this pull request as ready for review May 13, 2026 13:03

refactor: flip tooltipped/addToolTip params to (content, element)

89d0f76

Agent-Logs-Url: https://github.com/refined-github/refined-github/sessions/d3b309f7-fd60-42d5-b103-135bcb248ab0 Co-authored-by: fregante <1402241+fregante@users.noreply.github.com>

Copilot finished work on behalf of fregante May 13, 2026 13:06

Copilot AI requested a review from fregante May 13, 2026 13:06

fregante and others added 2 commits May 13, 2026 20:09

Improve docs

a6a7e58

style hotkeys

c0c0aaf

SunsetTechuila approved these changes May 13, 2026

View reviewed changes

SunsetTechuila and others added 2 commits May 13, 2026 20:04

Apply suggestions from code review

3973cdc

Co-authored-by: Grigory <grigory.orlov.set@gmail.com>

foramt

6b8c72c

SunsetTechuila reviewed May 13, 2026

View reviewed changes

move styles

1fc248f

fregante reviewed May 13, 2026

View reviewed changes

fregante merged commit 7061f6b into main May 13, 2026
10 checks passed

fregante deleted the copilot/add-helper-for-tool-tip-element branch May 13, 2026 15:35

Uh oh!

Conversation

Copilot AI commented May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

New helpers: source/helpers/tooltip.tsx

Refactored

Type

Test URLs

Screenshot

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

fregante left a comment

Choose a reason for hiding this comment

Uh oh!

SunsetTechuila May 13, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

SunsetTechuila commented May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

SunsetTechuila May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

fregante May 13, 2026

Choose a reason for hiding this comment

Uh oh!

fregante commented May 13, 2026

Uh oh!

Uh oh!

fregante May 13, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

SunsetTechuila commented May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fregante commented May 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Milestone

Development

Uh oh!

3 participants

Copilot AI commented May 13, 2026 •

edited

Loading

New helpers: `source/helpers/tooltip.tsx`

SunsetTechuila commented May 13, 2026 •

edited

Loading

SunsetTechuila May 13, 2026 •

edited

Loading

SunsetTechuila commented May 13, 2026 •

edited

Loading

fregante commented May 13, 2026 •

edited

Loading