[PR #5935] fix(ui): add missing tooltips to icon-only buttons #5427

New issue

Open

opened 2026-03-17 02:52:34 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 02:52:34 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/5935
Author: @nikhilmahato21
Created: 3/4/2026
Status: 🔄 Open

Base: next ← Head: fix/add-missing-tooltips-icon-buttons

📝 Commits (10+)

01c6802 fix(ui): add missing tooltips to icon-only buttons
67fcf5c fix: improve v-tippy module for tippy wrapper bug
0ef644f chore: add suble border for tippy
3cc5fb9 chore: revert the v-tippy attribute
08345cc chore: add unmounted hook
5da0f2f chore: update tippy arrow colour
38294b9 chore: guard against uninitialized tippy props in updated hook
0b53e46 chore: add binding gaurds
24d55fc chore: extract duplicate code to function
adaadb0 chore: add doc comment

📊 Changes

5 files changed (+125 additions, -7 deletions)

View changed files

📝 packages/hoppscotch-common/assets/themes/tippy-themes.scss (+4 -4)
📝 packages/hoppscotch-common/locales/en.json (+1 -0)
📝 packages/hoppscotch-common/src/components/app/Header.vue (+2 -0)
📝 packages/hoppscotch-common/src/components/graphql/Query.vue (+1 -1)
📝 packages/hoppscotch-common/src/modules/tippy.ts (+117 -2)

📄 Description

Closes #5915

Summary

Override the v-tippy directive at the platform level to read tooltip content from vnode.props instead of el.getAttribute('title'), fixing all icon-only buttons inside <tippy> wrappers in one place
Add unmounted cleanup hook to prevent memory leaks when elements are removed via v-if
Skip redundant setProps() calls when content hasn't changed to reduce unnecessary work on re-renders
Fix tooltip arrow/border color mismatch on dark and black themes

Root Cause

The original vue-tippy directive reads content via el.getAttribute('title'), but tippy.js strips the title attribute during initialization. When a button is inside a <tippy> wrapper (used for popovers), the parent's useTippy() strips the title before the child directive can read it — resulting in missing tooltips on ~45 instances across 32 files.

Approach

Instead of patching each affected component individually, this overrides the v-tippy directive in tippy.ts to read from vnode.props (which is immune to DOM attribute stripping). Zero consumer changes needed.

❗ Problem

Some icon-only buttons had no tooltip.
Some relied on the native title attribute instead of v-tippy’s content.
Screen readers could interpret certain buttons as generic “button”.
UX inconsistency across:
- Header buttons (Downloads, Help, etc.)
- Settings / Interceptor
- GraphQL editor action buttons (clear, prettify, copy, line wrap)

https://github.com/user-attachments/assets/4fbb81a8-eb2a-4af7-9c15-ef8dfd41e415

Summary by cubic

Standardizes tooltips on icon-only buttons using vue-tippy to improve accessibility and consistency. Fixes missing tooltips inside <tippy> wrappers and updates the tooltip theme with a subtle divider border and matching arrow color.

Bug Fixes
- Replaced built-in directive with custom v-tippy (registers vue-tippy as tippy-original); reads content from vnode.props with DOM fallback, updates on re-render, skips redundant setProps, adds guards, and destroys on unmount—restores tooltips inside <tippy> wrappers.
- Added tooltip to the Header Downloads button using app.downloads; ensured GraphQL Query action tooltip binds correctly.
- Theme tweaks: border-divider border and matching arrow fill across themes.
Refactors
- Extracted tooltip option resolution into a helper and added inline docs.

^{Written for commit a9f2308b745e0156fb209c486ed8d726437129b4. Summary will update on new commits.}

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/5935 **Author:** [@nikhilmahato21](https://github.com/nikhilmahato21) **Created:** 3/4/2026 **Status:** 🔄 Open **Base:** `next` ← **Head:** `fix/add-missing-tooltips-icon-buttons` --- ### 📝 Commits (10+) - [`01c6802`](https://github.com/hoppscotch/hoppscotch/commit/01c68022fddcb0775ae620ddb999b9dc5e3c2b98) fix(ui): add missing tooltips to icon-only buttons - [`67fcf5c`](https://github.com/hoppscotch/hoppscotch/commit/67fcf5c1368f72de21842560315761026b903f7d) fix: improve v-tippy module for tippy wrapper bug - [`0ef644f`](https://github.com/hoppscotch/hoppscotch/commit/0ef644f7d2242a841faaf39cf711c049d36b5ace) chore: add suble border for tippy - [`3cc5fb9`](https://github.com/hoppscotch/hoppscotch/commit/3cc5fb941742d32b4264d68dd8450ff0f4386ab6) chore: revert the v-tippy attribute - [`08345cc`](https://github.com/hoppscotch/hoppscotch/commit/08345ccfda93b5def5d15dfe49e2e740739631f9) chore: add `unmounted` hook - [`5da0f2f`](https://github.com/hoppscotch/hoppscotch/commit/5da0f2f8f39b12d469ec1999d71f56e297a4b1e0) chore: update tippy arrow colour - [`38294b9`](https://github.com/hoppscotch/hoppscotch/commit/38294b9d37f4c8dff5013e413d11d0fe7d417951) chore: guard against uninitialized tippy props in updated hook - [`0b53e46`](https://github.com/hoppscotch/hoppscotch/commit/0b53e4691f087281ddcd65b960c98722486aac2e) chore: add binding gaurds - [`24d55fc`](https://github.com/hoppscotch/hoppscotch/commit/24d55fcd48e60c710990f95fa3f683b665f42326) chore: extract duplicate code to function - [`adaadb0`](https://github.com/hoppscotch/hoppscotch/commit/adaadb0704fcba606af5cde5231eb4a24d948425) chore: add doc comment ### 📊 Changes **5 files changed** (+125 additions, -7 deletions) <details> <summary>View changed files</summary> 📝 `packages/hoppscotch-common/assets/themes/tippy-themes.scss` (+4 -4) 📝 `packages/hoppscotch-common/locales/en.json` (+1 -0) 📝 `packages/hoppscotch-common/src/components/app/Header.vue` (+2 -0) 📝 `packages/hoppscotch-common/src/components/graphql/Query.vue` (+1 -1) 📝 `packages/hoppscotch-common/src/modules/tippy.ts` (+117 -2) </details> ### 📄 Description Closes #5915 ## Summary - Override the `v-tippy` directive at the platform level to read tooltip content from `vnode.props` instead of `el.getAttribute('title')`, fixing all icon-only buttons inside `<tippy>` wrappers in one place - Add `unmounted` cleanup hook to prevent memory leaks when elements are removed via `v-if` - Skip redundant `setProps()` calls when content hasn't changed to reduce unnecessary work on re-renders - Fix tooltip arrow/border color mismatch on dark and black themes ## Root Cause The original vue-tippy directive reads content via `el.getAttribute('title')`, but tippy.js strips the `title` attribute during initialization. When a button is inside a `<tippy>` wrapper (used for popovers), the parent's `useTippy()` strips the title before the child directive can read it — resulting in missing tooltips on ~45 instances across 32 files. ## Approach Instead of patching each affected component individually, this overrides the `v-tippy` directive in `tippy.ts` to read from `vnode.props` (which is immune to DOM attribute stripping). Zero consumer changes needed. --- ## ❗ Problem - Some icon-only buttons had no tooltip. - Some relied on the native `title` attribute instead of `v-tippy`’s `content`. - Screen readers could interpret certain buttons as generic “button”. - UX inconsistency across: - Header buttons (Downloads, Help, etc.) - Settings / Interceptor - GraphQL editor action buttons (clear, prettify, copy, line wrap) --- https://github.com/user-attachments/assets/4fbb81a8-eb2a-4af7-9c15-ef8dfd41e415  --- ## Summary by cubic Standardizes tooltips on icon-only buttons using `vue-tippy` to improve accessibility and consistency. Fixes missing tooltips inside `<tippy>` wrappers and updates the tooltip theme with a subtle divider border and matching arrow color. - **Bug Fixes** - Replaced built-in directive with custom `v-tippy` (registers `vue-tippy` as `tippy-original`); reads content from `vnode.props` with DOM fallback, updates on re-render, skips redundant `setProps`, adds guards, and destroys on unmount—restores tooltips inside `<tippy>` wrappers. - Added tooltip to the Header Downloads button using `app.downloads`; ensured GraphQL Query action tooltip binds correctly. - Theme tweaks: `border-divider` border and matching arrow fill across themes. - **Refactors** - Extracted tooltip option resolution into a helper and added inline docs. <sup>Written for commit a9f2308b745e0156fb209c486ed8d726437129b4. Summary will update on new commits.</sup>  --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>