Add tooltips to the item sheet traits

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

@@ -3,6 +3,7 @@ import { HTMLTagifyTagsElement } from "@system/html-elements/tagify-tags.ts";
 import Tagify, { TagifySettings } from "@yaireo/tagify";
 import { DestroyableManager } from "./destroyables.ts";
 import { objectHasKey } from "./misc.ts";
+import { createHTMLElement } from "@util";
 
 function traitSlugToObject(trait: string, dictionary: Record<string, string | undefined>): TraitViewData {
     // Look up trait labels from `npcAttackTraits` instead of `weaponTraits` in case a battle form attack is
@@ -66,6 +67,38 @@ function tagify(
         editTags,
         delimiters,
         whitelist: whitelistTransformed,
+        templates: {
+            tag(tagData: TagRecord): string {
+                const removeButton = document.createElement("x");
+                removeButton.className = this.settings.classNames.tagX;
+                removeButton.role = "button";
+                removeButton.ariaLabel = "remove tag";
+
+                const tag = document.createElement("tag");
+                tag.className = this.settings.classNames.tag;
+                tag.appendChild(removeButton);
+                tag.appendChild(
+                    createHTMLElement("div", {
+                        children: [
+                            createHTMLElement("span", {
+                                innerHTML: tagData[this.settings.tagTextProp] || tagData.value,
+                                classes: [this.settings.classNames.tagText],
+                            }),
+                        ],
+                    }),
+                );
+
+                tag.contentEditable = "false";
+                tag.spellcheck = false;
+                tag.tabIndex = this.settings.a11y.focusableTags ? 0 : -1;
+
+                for (const [key, value] of Object.entries(tagData)) {
+                    tag.setAttribute(key, value);
+                }
+
+                return tag.outerHTML;
+            },
+        },
     });
 
     DestroyableManager.instance.observe(tagify);