refined-github · fregante · May 13, 2026 · May 13, 2026 · May 13, 2026 · May 13, 2026
diff --git a/source/features/improve-shortcut-help.tsx b/source/features/improve-shortcut-help.tsx
@@ -7,6 +7,7 @@ import {$, $optional, elementExists} from 'select-dom';
 import features from '../feature-manager.js';
 import {isEditable} from '../helpers/dom-utils.js';
 import {shortcutMap} from '../helpers/feature-helpers.js';
+import {upperCaseFirst} from '../github-helpers/index.js';
 import onetime from '../helpers/onetime.js';
 import observe from '../helpers/selector-observer.js';
 
@@ -84,7 +85,7 @@ const getRghShortcutsContainer = memoize(
 								<>
 									{index > 0 && ' '}
 									<span className={chord.className}>
-										{key.charAt(0).toUpperCase() + key.slice(1)}
+										{upperCaseFirst(key)}
 									</span>
 								</>
 							))}

diff --git a/source/features/table-input.tsx b/source/features/table-input.tsx
@@ -9,6 +9,7 @@ import {insertTextIntoField} from 'text-field-edit';
 
 import features from '../feature-manager.js';
 import {actionBar} from '../github-helpers/selectors.js';
+import {tooltipped} from '../helpers/tooltip.js';
 import observe from '../helpers/selector-observer.js';
 import smartBlockWrap from '../helpers/smart-block-wrap.js';
 
@@ -39,15 +40,16 @@ function add(container: HTMLElement): void {
 
 	container.parentElement!.append(
 		<details className="details-reset details-overlay select-menu select-menu-modal-right hx_rsm my-auto">
-			<summary
-				id="rgh-table-input-button"
-				className="Button Button--iconOnly Button--invisible Button--medium"
-				role="button"
-				aria-labelledby="rgh-table-input-tooltip"
-				aria-haspopup="menu"
-			>
-				<TableIcon />
-			</summary>
+			{tooltipped(
+				'Add a table',
+				<summary
+					className="Button Button--iconOnly Button--invisible Button--medium"
+					role="button"
+					aria-haspopup="menu"
+				>
+					<TableIcon />
+				</summary>,
+			)}
 			<details-menu
 				className="select-menu-modal position-absolute right-0 hx_rsm-modal rgh-table-input"
 				role="menu"
@@ -63,16 +65,6 @@ function add(container: HTMLElement): void {
 				))}
 			</details-menu>
 		</details>,
-		<tool-tip
-			id="rgh-table-input-tooltip"
-			for="rgh-table-input-button"
-			className="sr-only position-absolute"
-			popover="manual"
-			data-direction="s"
-			data-type="label"
-		>
-			Add a table
-		</tool-tip>,
 	);
 }
 

diff --git a/source/features/unwrap-unnecessary-dropdowns.tsx b/source/features/unwrap-unnecessary-dropdowns.tsx
@@ -14,6 +14,7 @@ import * as pageDetect from 'github-url-detection';
 import replaceElementTypeInPlace from '../helpers/recreate-element.js';
 import {frame} from '../helpers/dom-utils.js';
 import {legacyCommentField} from '../github-helpers/selectors.js';
+import {tooltipped} from '../helpers/tooltip.js';
 import observe from '../helpers/selector-observer.js';
 import features from '../feature-manager.js';
 
@@ -73,14 +74,9 @@ function createResolveConflictsButtons(menuItems: Element[]): JSX.Element {
 				const isDisabled = Boolean(inactiveReason);
 				const shouldHaveTooltip = isCopilotItem || isDisabled;
 
-				const buttonId = crypto.randomUUID();
-				const tooltipId = crypto.randomUUID();
-
 				let button: JSX.Element | HTMLAnchorElement
 					= <button
-						id={buttonId}
 						className={`Button Button--medium Button--secondary ${isCopilotItem ? 'Button--iconOnly' : ''}`}
-						aria-labelledby={shouldHaveTooltip ? tooltipId : undefined}
 						type="button"
 						disabled={isDisabled}
 						onClick={isCopilotItem ? insertCopilotInstruction : undefined}
@@ -100,22 +96,11 @@ function createResolveConflictsButtons(menuItems: Element[]): JSX.Element {
 					button.href = `${location.pathname}/conflicts`;
 				}
 
-				const tooltip = shouldHaveTooltip && (
-					<tool-tip
-						id={tooltipId}
-						className="sr-only position-absolute"
-						for={buttonId}
-						popover="manual"
-						data-direction="s"
-						data-type="label"
-						aria-hidden="true"
-						role="tooltip"
-					>
-						{inactiveReason ?? 'Ask Copilot to resolve conflicts'}
-					</tool-tip>
-				);
-
-				return <div> {button} {tooltip} </div>;
+				return <div>{
+					shouldHaveTooltip
+						? tooltipped(inactiveReason ?? 'Ask Copilot to resolve conflicts', button)
+						: button
+				}</div>;
 			})}
 		</div>
 	);

diff --git a/source/features/update-pr-from-base-branch.tsx b/source/features/update-pr-from-base-branch.tsx
@@ -20,6 +20,7 @@ import {deletedHeadRepository} from '../github-helpers/selectors.js';
 import {isArchivedRepoAsync} from '../github-helpers/index.js';
 import showToast from '../github-helpers/toast.js';
 import {getIdentifiers} from '../helpers/feature-helpers.js';
+import {tooltipped} from '../helpers/tooltip.js';
 import observe from '../helpers/selector-observer.js';
 import features from '../feature-manager.js';
 
@@ -88,39 +89,22 @@ const feature = getIdentifiers(import.meta.url);
 function createButtonGroup(): JSX.Element {
 	return (
 		<div className="ButtonGroup">
-			{Object.entries(updateMethods).map(([method, label]) => {
-				const buttonId = crypto.randomUUID();
-				const tooltipId = crypto.randomUUID();
-				return (
-					<div>
-						<button
-							id={buttonId}
-							className={`Button--secondary Button--medium Button ${feature.class}`}
-							data-method={method}
-							aria-labelledby={tooltipId}
-							type="button"
-						>
-							<span className="Button-content">
-								<span className="Button-label">
-									{label.buttonLabel}
-								</span>
+			{Object.entries(updateMethods).map(([method, label]) => (
+				<div>{tooltipped(
+					label.tooltipLabel,
+					<button
+						className={`Button--secondary Button--medium Button ${feature.class}`}
+						data-method={method}
+						type="button"
+					>
+						<span className="Button-content">
+							<span className="Button-label">
+								{label.buttonLabel}
 							</span>
-						</button>
-						<tool-tip
-							id={tooltipId}
-							className="sr-only position-absolute"
-							for={buttonId}
-							popover="manual"
-							data-direction="s"
-							data-type="label"
-							aria-hidden="true"
-							role="tooltip"
-						>
-							{label.tooltipLabel}
-						</tool-tip>
-					</div>
-				);
-			})}
+						</span>
+					</button>,
+				)}</div>
+			))}
 		</div>
 	);
 }

diff --git a/source/globals.d.ts b/source/globals.d.ts
@@ -77,7 +77,7 @@ declare namespace JSX {
 		'action-menu': IntrinsicElements.HTMLELement;
 		'focus-group': IntrinsicElements.HTMLELement;
 		'action-list': IntrinsicElements.HTMLELement;
-		'tool-tip': IntrinsicElements.HTMLElement;
+		'tool-tip': IntrinsicElements.HTMLElement & {for?: string};
 	}
 
 	type BaseElement = IntrinsicElements['div'];

diff --git a/source/helpers/tooltip.css b/source/helpers/tooltip.css
@@ -0,0 +1,37 @@
+/* Copied from: https://github.com/primer/react/blob/dfed7ca73532922ec0526dd85afcf7ae471c566e/packages/react/src/KeybindingHint/KeybindingHint.module.css */
+.rgh-shortcut {
+	position: relative;
+	padding: 0;
+	margin-left: var(--base-size-6, 0.375rem);
+	overflow: visible;
+	/* eslint-disable-next-line css/font-family-fallbacks */
+	font-family: inherit;
+	font-size: inherit;
+	line-height: unset;
+	color: inherit;
+	white-space: nowrap;
+	vertical-align: baseline;
+	background: none;
+	border: none;
+	box-shadow: none;
+}
+
+/* Adapted from: https://github.com/primer/react/blob/dfed7ca73532922ec0526dd85afcf7ae471c566e/packages/react/src/KeybindingHint/components/Chord.module.css */
+.rgh-shortcut-chord {
+	display: inline-flex;
+	border: var(--borderWidth-thin, 0.0625rem) solid;
+	border-radius: var(--borderRadius-small, 0.1875rem);
+	border-color: #0000;
+	font-weight: var(--base-text-weight-normal, 400);
+	font-size: 11px;
+	gap: 0.5ch;
+	box-shadow: none;
+	vertical-align: baseline;
+	overflow: hidden;
+	justify-content: center;
+	padding: var(--base-size-2, 0.125rem);
+	line-height: var(--base-size-8, 0.5rem);
+	min-width: var(--base-size-16, 1rem);
+	color: var(--fgColor-onEmphasis, fuchsia);
+	background: var(--counter-bgColor-emphasis, fuchsia);
+}
diff --git a/source/helpers/tooltip.tsx b/source/helpers/tooltip.tsx
@@ -0,0 +1,83 @@
+import './tooltip.css';
+
+import React from 'dom-chef';
+
+import {upperCaseFirst} from '../github-helpers/index.js';
+
+export type TooltipOptions = {
+	label: string;
+	shortcut?: string;
+	direction?: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw';
+	type?: 'label' | 'description';
+};
+
+function renderShortcut(shortcut: string): JSX.Element {
+	return (
+		<kbd className='rgh-shortcut'>
+			{shortcut.split(' ').map((key, index) => (
+				<>
+					{index > 0 && ' '}
+					<span className='rgh-shortcut-chord' data-kbd-chord='true'>
+						{upperCaseFirst(key)}
+					</span>
+				</>
+			))}
+		</kbd>
+	);
+}
+
+function createTooltipFor(element: Element, content: string | TooltipOptions): HTMLElement {
+	const options: TooltipOptions = typeof content === 'string'
+		? {label: content}
+		: content;
+
+	// Ensure the element has an ID for the `for` attribute to link to
+	element.id ||= crypto.randomUUID();
+
+	const tooltipId = crypto.randomUUID();
+	element.setAttribute('aria-labelledby', tooltipId);
+
+	return (
+		<tool-tip
+			id={tooltipId}
+			className="sr-only position-absolute"
+			for={element.id}
+			popover="manual"
+			data-direction={options.direction ?? 's'}
+			data-type={options.type ?? 'label'}
+			aria-hidden="true"
+			role="tooltip"
+		>
+			{options.label}
+			{options.shortcut && renderShortcut(options.shortcut)}
+		</tool-tip>
+	);
+}
+
+/**
+Generates a tooltip for the received element. You should use this when generating elements via JSX
+
+@example return <div>{tooltipped('Does something', <button type="button">...</button>)}</div>;
+*/
+export function tooltipped(
+	content: string | TooltipOptions,
+	element: Element,
+): [Element, HTMLElement] {
+	return [element, createTooltipFor(element, content)];
+}
+
+/**
+Attaches a tooltip to an existing element. Don't use this with JSX.
+
+@example addToolTip('Does something', $('.some-existing-button'))
+*/
+export default function addToolTip(
+	content: string | TooltipOptions,
+	element: Element,
+): void {
+	if (!element.parentNode) {
+		throw new Error('Element has no parent. Use `tooltipped` instead for elements not yet attached to a parent.');
+	}
+
+	element.after(createTooltipFor(element, content));
+}