Item sheet trait tooltip

src/module/sheet/helpers.ts

@@ -42,12 +42,15 @@ function createTagifyTraits(traits: Iterable<string>, { sourceTraits, record }:
     return [...traitSlugs, ...hiddenTraits]
         .map((slug) => {
             const label = game.i18n.localize(record?.[slug] ?? slug);
+            const traitDescriptions: Record<string, string | undefined> = CONFIG.PF2E.traitsDescriptions;
+            const tooltip = traitDescriptions[slug];
             return {
                 id: slug,
                 value: label,
                 readonly: readonlyTraits.has(slug),
                 // Must be undefined for tagify to work
                 hidden: !traitSlugs.has(slug) || undefined,
+                "data-tooltip": tooltip,
             };
         })
         .sort((t1, t2) => t1.value.localeCompare(t2.value));
@@ -229,6 +232,7 @@ interface TagifyEntry {
      * Tagify treats any value as true, even false or null.
      */
     hidden?: true;
+    "data-tooltip"?: string;
 }
 
 export {

src/styles/_tags.scss

@@ -85,6 +85,16 @@
     }
 }
 
+// Allow tags to recieve events and disable just the rarity dropdown
+tags.tagify {
+    &[disabled] {
+        pointer-events: inherit;
+        select.tag.rarity {
+            pointer-events: none;
+        }
+    }
+}
+
 // Tagify and non-tagify paizo style main traits row
 .tags.paizo-style {
     border: none;

src/util/tags.ts

@@ -66,6 +66,22 @@ function tagify(
         editTags,
         delimiters,
         whitelist: whitelistTransformed,
+        templates: {
+            tag(tagData: TagRecord) {
+                // Default template without title to prevent the default tag tooltip from showing.
+                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>`;
+            },
+        },
     });
 
     DestroyableManager.instance.observe(tagify);