Add tooltips to the item sheet traits #17685
Conversation
src/util/tags.ts
Outdated
| return `<tag | ||
| contenteditable='false' | ||
| spellcheck='false' | ||
| tabIndex="${this.settings.a11y.focusableTags ? 0 : -1}" | ||
| class="${this.settings.classNames.tag}" | ||
| ${this.getAttributes(tagData)}> | ||
| <x title='' class="${this.settings.classNames.tagX}" role='button' aria-label='remove tag'></x> | ||
| <div> | ||
| <span class="${this.settings.classNames.tagText}">${tagData[this.settings.tagTextProp] || tagData.value}</span> | ||
| </div> | ||
| </tag>`; | ||
| }, |
There was a problem hiding this comment.
@stwlam i might need help since i'm not that familiar with type script.
As far as i can see i cant use renderTemplate since an async function can't be assigned to tag: string.
I could use createElements, but then i have to either extend the function to allow custom tags and attributes or change the custom tags to html compliant tags and adjust the styling.
There was a problem hiding this comment.
@stwlam fixed now with the help of @ricardoSlv.
|
i moved the html snipped into a getter function, i'm not sure if you meant that or that i should move it into a file. |
|
I assume stwlam means to use the dom functions to create elements. There's utility methods in src/util/dom.ts to reduce how verbose they are and make it play better with typescript as well. |
|
A template would probably be best in this case. |
|
@Kulkodar Still wanna finish this? I believe I help you if you want 🙋♂️ |
|
@ricardoSlv Life got a little busy but yes a nudge in the right direction would be nice. |
src/util/tags.ts
Outdated
| tag.spellcheck = false; | ||
| tag.tabIndex = this.settings.a11y.focusableTags ? 0 : -1; | ||
|
|
||
| Object.entries(tagData).forEach(([key, value]) => { |
There was a problem hiding this comment.
prefer actual for loops
|
Out of curiousity, before I check it out locally and start seeing if everything still works ok, why the CSS changes? |
|
tagify has a css rule that apply on .tagify__tag>div that broke/changed the layout of the x button and tag itself since they are now divs instead of custom types. |
|
Is there an issue continuing to use that custom tag? |
|
createHTMLElement does not allow custom tags as far as i see and i am not sure if it is possible/ a good idea to extend/change createHTMLElement to allow custom tags. |
|
I'd like to tag in @stwlam but if we don't relax the typing, you can use document.createElement() or cast it. I'd rather not chance inconsistencies or possible errors from changing the tag name. I think trying to keep the result as close as possible to what we already have is best. |
|
Alright, looks fine to me. There's some noise in the data (__isValid etc), but the original wasn't clean to begin with. Thanks for the PR. |
CarlosFdez
changed the title
|
Thanks for taking your time |
Adjusted
createTagifyTraitsto include the tag description and adjusted the tag template to remove the browser tool tip from tags. Side effect tags in creature sheets also show their tootip.Closes #17491
2024-12-11.18-13-55.mp4
TODO:
CONFIG.PF2E.traitsDescriptions