feat: added hover and long press tooltips to quicktools by gahanad · Pull Request #2456 · Acode-Foundation/Acode

gahanad · 2026-07-08T08:42:42Z

Summary of this PR

This PR adds tooltips for the editor quick tools.

Changes

Added a reusable tooltip component.
Added tooltip support on mouse hover.
Added tooltip support on touch long-press.
Added descriptions for search-related quick tool buttons.
Preserved the existing long-press behavior for repeatable buttons.

Testing

Mouse hover
Touch long-press
Undo/Redo
Search buttons
Replace/Replace All
Arrow keys (repeat behavior remains unchanged)

Closes #2268

greptile-apps · 2026-07-08T08:46:41Z

Greptile Summary

This PR adds hover and long-press tooltip support to the editor quick-tools toolbar, introducing a reusable singleton Tooltip component that positions itself above the target button with viewport-edge clamping and a short fade animation via motion. The previous review's concerns about missing id props on search-row buttons and RAF-stacking flicker have both been addressed.

New tooltip component (src/components/tooltip/index.js, style.scss): singleton div appended to <body>, RAF-guarded positioning with Math.max/Math.min clamping, cancelAnimationFrame for rapid-hover safety, and a 150 ms fade powered by motion.animate().
Footer wiring (footer.js): mouseenter/mouseleave listeners added to every RowItem that has an id; search-row buttons now receive explicit id props so tooltip lookup and long-press detection both work.
Touch long-press path (quickToolsInit.js): a new longPress flag is set inside the 500 ms context-menu timeout; tooltip is shown for any button, repeat actions still fire for repeatable buttons, and touchcancel / onclick always call hideTooltip() to clean up.

Confidence Score: 5/5

Safe to merge — the tooltip feature is additive, touch interaction logic is preserved, and all previously flagged regressions have been corrected.

The core logic changes are straightforward: a new singleton tooltip element, RAF-guarded positioning, and a longPress flag that gates the touch-release click. All three paths (hover, long-press, click-mode) correctly call hideTooltip() on cleanup. The only open items are cosmetic — concurrent motion animation handles and untranslated i18n strings — neither of which affects correctness or data integrity.

src/components/tooltip/index.js — the motion.animate() handle from a prior fade is not cancelled before starting the next animation, which can cause a brief visual stutter on fast hover. No files require attention for correctness.

Important Files Changed

Filename	Overview
src/components/tooltip/index.js	New singleton tooltip component with RAF cancellation and viewport-edge clamping. A minor animation-conflict issue remains: `motion.animate()` handles from prior show/hide calls are never cancelled, which can cause visible stuttering on rapid hover.
src/components/tooltip/style.scss	New tooltip styles using CSS custom properties for theming. Fixed positioning, pointer-events: none, and high z-index are all correct.
src/components/quickTools/footer.js	Adds `id` props to all five search-row buttons and wires mouseenter/mouseleave listeners on RowItem for hover tooltips. The previous missing-id issue is resolved.
src/handlers/quickToolsInit.js	Introduces `longPress` flag and touch long-press tooltip path. Tooltip is properly hidden in touchcancel, onclick, and when touchend fires after a long-press. Repeat-button context-menu behavior is preserved.
src/lang/en-us.json	Adds five English tooltip strings for search/replace quick-tool buttons. Strings are correct and consistent with existing naming convention.
src/lang/ar-ye.json	New quicktools strings added in English despite the file containing native Arabic translations for all other quicktools keys; same pattern repeated across all 30 non-English locale files.
pnpm-workspace.yaml	New file whitelisting `@parcel/watcher`, `core-js`, and `core-js-pure` for pnpm build execution. Unrelated to the tooltip feature but otherwise fine.

Sequence Diagram

%%{init: {'theme': 'neutral'}}%%
sequenceDiagram
    participant User
    participant RowItem
    participant quickToolsInit
    participant Tooltip

    Note over User,Tooltip: Mouse hover flow
    User->>RowItem: mouseenter
    RowItem->>Tooltip: showTooltip($item, description(id))
    Tooltip->>Tooltip: cancelAnimationFrame(rafId)
    Tooltip->>Tooltip: RAF → position + animate(opacity:1)
    User->>RowItem: mouseleave
    RowItem->>Tooltip: hideTooltip()
    Tooltip->>Tooltip: animate(opacity:0)

    Note over User,Tooltip: Touch long-press flow
    User->>quickToolsInit: touchstart
    quickToolsInit->>quickToolsInit: setTimeout(500ms)
    quickToolsInit->>Tooltip: showTooltip($el, description($el.dataset.id))
    alt repeat button
        quickToolsInit->>quickToolsInit: "contextmenu=true, oncontextmenu()"
    end
    User->>quickToolsInit: touchend / touchcancel
    quickToolsInit->>Tooltip: hideTooltip()

    Note over User,Tooltip: Click (any mode)
    User->>quickToolsInit: click / onclick
    quickToolsInit->>Tooltip: hideTooltip()

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
sequenceDiagram
    participant User
    participant RowItem
    participant quickToolsInit
    participant Tooltip

    Note over User,Tooltip: Mouse hover flow
    User->>RowItem: mouseenter
    RowItem->>Tooltip: showTooltip($item, description(id))
    Tooltip->>Tooltip: cancelAnimationFrame(rafId)
    Tooltip->>Tooltip: RAF → position + animate(opacity:1)
    User->>RowItem: mouseleave
    RowItem->>Tooltip: hideTooltip()
    Tooltip->>Tooltip: animate(opacity:0)

    Note over User,Tooltip: Touch long-press flow
    User->>quickToolsInit: touchstart
    quickToolsInit->>quickToolsInit: setTimeout(500ms)
    quickToolsInit->>Tooltip: showTooltip($el, description($el.dataset.id))
    alt repeat button
        quickToolsInit->>quickToolsInit: "contextmenu=true, oncontextmenu()"
    end
    User->>quickToolsInit: touchend / touchcancel
    quickToolsInit->>Tooltip: hideTooltip()

    Note over User,Tooltip: Click (any mode)
    User->>quickToolsInit: click / onclick
    quickToolsInit->>Tooltip: hideTooltip()

_{Reviews (4): Last reviewed commit: "fix: replaced title attribute" | Re-trigger Greptile}

bajrangCoder · 2026-07-08T14:26:37Z

+
+	padding: 6px 10px;
+
+	background: rgba(40,40,40,.95);


It should use theme var to match app theme

bajrangCoder · 2026-07-08T14:27:43Z

+
+	transform: translateY(5px);
+
+	transition: .15s;


it will be better to use motion(WAAPI) library for animation

bajrangCoder · 2026-07-08T14:34:02Z

-	if ($el.dataset.repeat === "true") {
-		contextmenuTimeout = setTimeout(() => {
-			if (touchMoved) return;
+	contextmenuTimeout = setTimeout(() => {


Long-press tooltips still execute non-repeat actions on release. The timeout shows the tooltip for every button, but contextmenu is only set for data-repeat="true" buttons. For non-repeat buttons, touchend reaches click($el), so a user long-pressing to inspect a tooltip can still insert text, save, open search settings, replace, etc.

gahanad · 2026-07-08T19:36:55Z

@greptile

gahanad · 2026-07-08T19:56:12Z

@greptile

Added reusable tooltip support for quick tools

4440f13

github-project-automation Bot added this to The Code Board - Acode Jul 8, 2026

github-project-automation Bot moved this to Backlog in The Code Board - Acode Jul 8, 2026

github-actions Bot added enhancement New feature or request translations Anything related to Translations Whether a Issue or PR labels Jul 8, 2026

greptile-apps Bot reviewed Jul 8, 2026

View reviewed changes

Comment thread src/components/tooltip/index.js Outdated

Comment thread src/components/quickTools/footer.js

Comment thread src/components/tooltip/index.js Outdated

Comment thread src/components/tooltip/index.js Outdated

gahanad added 2 commits July 8, 2026 14:59

Fix tooltip IDs for search quick tools

8c0866f

Added missing tooltip translation keys

659f0f5

This comment was marked as outdated.

Sign in to view

bajrangCoder self-requested a review July 8, 2026 10:16

UnschooledGamer added the community label Jul 8, 2026

bajrangCoder reviewed Jul 8, 2026

View reviewed changes

fix: addressing review feedback for quicktools tooltip

690021f

fix: replaced title attribute

d8c421b

gahanad requested a review from bajrangCoder July 8, 2026 20:07

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: added hover and long press tooltips to quicktools#2456

feat: added hover and long press tooltips to quicktools#2456
gahanad wants to merge 5 commits into
Acode-Foundation:mainfrom
gahanad:feature/quicktools-tooltip

gahanad commented Jul 8, 2026

Uh oh!

greptile-apps Bot commented Jul 8, 2026 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as outdated.

bajrangCoder Jul 8, 2026

Uh oh!

bajrangCoder Jul 8, 2026

Uh oh!

bajrangCoder Jul 8, 2026

Uh oh!

gahanad commented Jul 8, 2026

Uh oh!

gahanad commented Jul 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

gahanad commented Jul 8, 2026

Summary of this PR

Changes

Testing

Uh oh!

greptile-apps Bot commented Jul 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Greptile Summary

Confidence Score: 5/5

Important Files Changed

Sequence Diagram

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

This comment was marked as outdated.

bajrangCoder Jul 8, 2026

Choose a reason for hiding this comment

Uh oh!

bajrangCoder Jul 8, 2026

Choose a reason for hiding this comment

Uh oh!

bajrangCoder Jul 8, 2026

Choose a reason for hiding this comment

Uh oh!

gahanad commented Jul 8, 2026

Uh oh!

gahanad commented Jul 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

greptile-apps Bot commented Jul 8, 2026 •

edited

Loading