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

@@ -30,6 +30,20 @@ function transformWhitelist(whitelist: WhitelistData) {
               .sort((a, b) => a.value.localeCompare(b.value, game.i18n.lang));
 }
 
+function getTagifyTagTemplate(tagify: Tagify<TagRecord>, tagData: TagRecord): string {
+    return `<tag 
+        contenteditable='false' 
+        spellcheck='false' 
+        tabIndex="${tagify.settings.a11y.focusableTags ? 0 : -1}"
+        class="${tagify.settings.classNames.tag}"
+        ${tagify.getAttributes(tagData)}> 
+        <x title='' class="${tagify.settings.classNames.tagX}" role='button' aria-label='remove tag'></x>
+        <div>
+            <span class="${tagify.settings.classNames.tagText}">${tagData[tagify.settings.tagTextProp] || tagData.value}</span>
+        </div>
+    </tag>`;
+}
+
 /** Create a tagify select menu out of a JSON input element */
 function tagify(element: HTMLInputElement, options?: TagifyOptions): Tagify<TagRecord>;
 function tagify(element: HTMLTagifyTagsElement, options?: TagifyOptions): Tagify<TagRecord>;
@@ -66,6 +80,12 @@ function tagify(
         editTags,
         delimiters,
         whitelist: whitelistTransformed,
+        templates: {
+            tag(tagData: TagRecord) {
+                // Default template without title to prevent the default tag tooltip from showing.
+                return getTagifyTagTemplate(this, tagData);
+            },
+        },
     });
 
     DestroyableManager.instance.observe(tagify);