feat: add title attribute to sprite name in list items#3140
Merged
Conversation
Add HTML title attribute to the sprite name span in UIEditorSpriteItem so users can hover to see the full name when it is truncated. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com>
![fennoai[bot]](https://avatars.githubusercontent.com/in/1924301?s=60&v=4){kind=small}
Contributor
Author
There was a problem hiding this comment.
The change is minimal and correct — it adds a native tooltip for truncated sprite names by wrapping the text in <span :title="name">. No security or performance issues were found.
Two consistency observations worth considering:
1. Inconsistency with sibling item components — UIEditorBackdropItem.vue, UIEditorSoundItem.vue, UIEditorWidgetItem.vue, and UISpriteItem.vue all display a name inside UIBlockItemTitle with the same text-ellipsis CSS, but do not have the tooltip treatment. Users of those panels will still see truncated names without a hover hint.
A cleaner long-term fix would be to add a title prop to UIBlockItemTitle itself, so every caller benefits automatically and no extra <span> wrapper is needed per call site.
2. Double <span> nesting (addressed in the inline comment below) — the extra wrapper is harmless but slightly redundant given UIBlockItemTitle already wraps slot content in its own <span>.
Add optional `title` prop to UIBlockItemTitle and forward it to the inner truncation span, then use it in UIEditorSpriteItem to avoid the extra wrapper span. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com>
Add :title="name" to UIBlockItemTitle in UIEditorBackdropItem, UIEditorSoundItem, UIEditorWidgetItem, and UISpriteItem so truncated names show a hover tooltip consistently across all item panels. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com>
nighca
reviewed
May 12, 2026
Add :title="name" to UIBlockItemTitle in UISoundItem and UIBackdropItem. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com>
nighca
reviewed
May 12, 2026
Change title from optional to required prop to ensure all callers provide a tooltip value for truncated text. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com>
Add missing :title prop to all UIBlockItemTitle callers to satisfy the newly-required title prop: AnimationGenItem, BackdropGenItem, ParamSelector, CostumeGenItem, SpriteGenItem, SpxEffectKindItem, and the ui-design docs page. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com>
nighca
reviewed
May 12, 2026
Replace t(item.label) with $t(item.label) in the :title binding to be consistent with the template-level i18n helper usage. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com>
Run Prettier to fix line-length formatting issue flagged by CI. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com>
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
This comment was marked as resolved.
aofei
approved these changes
May 12, 2026
nighca
added a commit
that referenced
this pull request
May 15, 2026
* chore(deps): bump spx to 2.0.0 (#3127) Agent-Logs-Url: https://github.com/goplus/builder/sessions/147d2d8e-4bf8-4ae7-b66e-b8a41c970f3a Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: nighca <1492263+nighca@users.noreply.github.com> * Widget `<unstable-xgo-code-editor>` (#3089) * Add widget `<unstable-xgo-code-editor>` * Address widget review feedback * Stabilize layer order workarounds * Provide SPX knowledge from frontend (#3097) * UI update for tutorial pages (#3122) * update tutorial pages styles * compress tutorials banner * refine tutorials banner layout * show updated time for course series * details * Handle invalid image stalls in editor (#3136) * feat: add title attribute to sprite name in list items (#3140) * feat: add title attribute to sprite name in list items Add HTML title attribute to the sprite name span in UIEditorSpriteItem so users can hover to see the full name when it is truncated. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com> * refactor: move title tooltip to UIBlockItemTitle component Add optional `title` prop to UIBlockItemTitle and forward it to the inner truncation span, then use it in UIEditorSpriteItem to avoid the extra wrapper span. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com> * feat: add title attribute to name in all block item components Add :title="name" to UIBlockItemTitle in UIEditorBackdropItem, UIEditorSoundItem, UIEditorWidgetItem, and UISpriteItem so truncated names show a hover tooltip consistently across all item panels. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com> * feat: add title attribute to sprite name in list items Add :title="name" to UIBlockItemTitle in UISoundItem and UIBackdropItem. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com> * refactor: make title prop required in UIBlockItemTitle Change title from optional to required prop to ensure all callers provide a tooltip value for truncated text. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com> * feat: add title attribute to sprite name in list items Add missing :title prop to all UIBlockItemTitle callers to satisfy the newly-required title prop: AnimationGenItem, BackdropGenItem, ParamSelector, CostumeGenItem, SpriteGenItem, SpxEffectKindItem, and the ui-design docs page. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com> * fix: use $t() instead of t() in ParamSelector template Replace t(item.label) with $t(item.label) in the :title binding to be consistent with the template-level i18n helper usage. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com> * style: fix formatting in CostumeGenItem.vue Run Prettier to fix line-length formatting issue flagged by CI. Generated with [codeagent](https://github.com/qbox/codeagent) Co-authored-by: nighca <1492263+nighca@users.noreply.github.com> --------- Co-authored-by: xgopilot <noreply@goplus.org> Co-authored-by: nighca <1492263+nighca@users.noreply.github.com> * feat(code-editor): support sprite instance input helpers (#3123) Handle `spx-sprite-instance` with the existing resource input helper so sprite instance slots can use the sprite resource selector. Write selected sprite instances as bare identifiers while keeping resource name slots as string literals. Fixes #3110 Updates goplus/xgolsw#317 Signed-off-by: Aofei Sheng <aofei@aofeisheng.com> * Update UI empty/error default images (#3134) * update ui empty/error default images * compress svg size * rename image * adjust svg size * chore(deps): bump github.com/goplus/xgolsw to 0.20.0 in /tools/spxls (#3163) Signed-off-by: Aofei Sheng <aofei@aofeisheng.com> * feat(spx-gui): optimize video cut preview during animation generation (#3150) * optimize video cut preview during animation generation * use css variables for track padding * fix details * remove page for test * optimize code * queue video seeks to keep animation preview responsive during dragging --------- Signed-off-by: Aofei Sheng <aofei@aofeisheng.com> Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> Co-authored-by: nighca <1492263+nighca@users.noreply.github.com> Co-authored-by: chennan <chennan@qiniu.com> Co-authored-by: fennoai[bot] <231223108+fennoai[bot]@users.noreply.github.com> Co-authored-by: xgopilot <noreply@goplus.org> Co-authored-by: Aofei Sheng <aofei@aofeisheng.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Requested by @nighca
Update #3137
Summary
titleprop toUIBlockItemTitleand bound it to the inner truncation<span>, so hovering over a truncated name shows the full text as a native browser tooltip:title="name"(or the equivalent translated string) toUIBlockItemTitlein all block-item components that display a nameChanges
Core
UIBlockItemTitle.vue: Added requiredtitle: stringprop; forwarded to the inner<span :title="title">that appliestext-ellipsisBlock-item components (editor panel)
UIEditorSpriteItem.vueUIEditorBackdropItem.vueUIEditorSoundItem.vueUIEditorWidgetItem.vueBlock-item components (non-editor)
UISpriteItem.vueUIBackdropItem.vueUISoundItem.vueAsset generation components
AnimationGenItem.vueBackdropGenItem.vueSpriteGenItem.vueCostumeGenItem.vueParamSelector.vue— uses$t(item.label)as the titleOther
SpxEffectKindItem.vue— uses$t(item.text)as the titledocs/ui-design/index.vue— passes literal title strings matching slot content