Skip to content

fix: use Vue tooltips for rank emojis - #307

Open
tomatotomata wants to merge 2 commits into
vkoves:mainfrom
tomatotomata:codex/emoji-vue-tooltip-305
Open

fix: use Vue tooltips for rank emojis#307
tomatotomata wants to merge 2 commits into
vkoves:mainfrom
tomatotomata:codex/emoji-vue-tooltip-305

Conversation

@tomatotomata

Copy link
Copy Markdown

Summary

Replaces the native title attributes on the rank and status emojis with the repository's existing v-tooltip directive. This makes the explanations appear through the same Vue tooltip system already used by the application, instead of relying on the delayed browser tooltip.

The change stays inside OverallRankEmoji.vue, keeps the existing messages, and registers the existing plugin for the component.

Fixes #305

Testing

  • corepack yarn prettier src/components/OverallRankEmoji.vue --check passes after formatting.
  • corepack yarn eslint src/components/OverallRankEmoji.vue passes.
  • git diff --check passes.
  • corepack yarn build was attempted, but did not finish within two minutes in this environment.

@netlify

netlify Bot commented Aug 5, 2026

Copy link
Copy Markdown

Deploy Preview for radiant-cucurucho-d09bae ready!

Name Link
🔨 Latest commit 7dae847
🔍 Latest deploy log https://app.netlify.com/projects/radiant-cucurucho-d09bae/deploys/6a7b3a4b8e333f00083da3e6
😎 Deploy Preview https://deploy-preview-307--radiant-cucurucho-d09bae.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@vkoves

vkoves commented Aug 7, 2026

Copy link
Copy Markdown
Owner

@tomatotomata - that's for the contribution! You have a merge conflict now, and did you want to move this PR out of draft, or were you waiting on something?

@tomatotomata
tomatotomata force-pushed the codex/emoji-vue-tooltip-305 branch from 4454096 to 1e2b917 Compare August 7, 2026 23:36
@tomatotomata
tomatotomata marked this pull request as ready for review August 7, 2026 23:36
@tomatotomata

Copy link
Copy Markdown
Author

Resolved the conflict against current main in 1e2b917. Upstream added a separate hasNeverSubmitted state, so I preserved that behavior and applied the same Vue tooltip treatment to both the new state and the existing old-data state. Prettier passes on the rebased file.

I also moved the PR out of draft. I had left it there because the full local build did not finish within the available window, but the branch is ready for the updated preview and review now.

@vkoves

vkoves commented Aug 10, 2026

Copy link
Copy Markdown
Owner

@tomatotomata - could you tighten up the tooltip? We probably want 12px font size and no extra vertical padding (might require tighter line height)

image

Signed-off-by: ahmadalguydi <ahmadalgaidy@hotmail.com>
@tomatotomata

Copy link
Copy Markdown
Author

I tightened the tooltip styling for the rank emojis on commit 7dae847. The rank component now uses its own tooltip class, keeps the existing global tooltip sizing, sets the text to 12px, and removes the extra vertical padding. Prettier and the component ESLint check pass; the full Gridsome build timed out locally after two minutes. Do you think this is closer to the screenshot?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Switch Emoji From Using Title Attribute To Proper Vue

2 participants