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,13 +85,23 @@
     }
 }
 
+// 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;
     gap: 0;
     padding: 0.5em 0.05em;
 
-    tag,
+    .tagify__tag,
     .tag,
     select.tag {
         background-color: var(--color-bg-trait);
@@ -100,17 +110,21 @@
         box-shadow: none;
         margin: 0;
 
-        x {
-            align-items: start;
+        &__removeBtn {
+            align-items: inherit;
+            padding: 0;
             margin: 0;
+            line-height: normal;
+            border-radius: 50px;
         }
 
-        &__removeBtn {
-            align-items: baseline;
+        //hides before added by tagify
+        &__removeBtn::before {
+            display: none;
         }
     }
 
-    tag,
+    .tagify__tag,
     select.tag {
         border-width: 2px 3px 2px 2px;
 
@@ -123,7 +137,7 @@
         }
     }
 
-    tag:last-of-type {
+    .tagify__tag:last-of-type {
         border-right-width: 5px;
     }
 
@@ -143,7 +157,7 @@
         }
     }
 
-    tag > div {
+    .tagify__tag > .text-container {
         border-radius: 0;
         display: flex;
         font: 500 var(--font-size-10) var(--sans-serif);
@@ -266,12 +280,12 @@ tags.tags.paizo-style {
         }
     }
 
-    tag {
+    .tagify__tag {
         height: var(--font-size-27);
     }
 
     // In lieu of remove button
-    tag[readonly="true"] {
+    .tagify__tag[readonly="true"] {
         padding-right: var(--space-2);
     }
 }

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,43 @@ function tagify(
         editTags,
         delimiters,
         whitelist: whitelistTransformed,
+        templates: {
+            tag(tagData: TagRecord): string {
+                // Default template without title to prevent the default tag tooltip from showing.
+                const removeButton = createHTMLElement("div", {
+                    dataset: { title: "" },
+                    classes: [this.settings.classNames.tagX],
+                });
+                removeButton.role = "button";
+                removeButton.ariaLabel = "remove tag";
+
+                const tag = createHTMLElement("div", {
+                    classes: [this.settings.classNames.tag],
+                    children: [
+                        removeButton,
+                        createHTMLElement("div", {
+                            classes: ["text-container"],
+                            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;
+
+                Object.entries(tagData).forEach(([key, value]) => {
+                    tag.setAttribute(key, value);
+                });
+
+                return tag.outerHTML;
+            },
+        },
     });
 
     DestroyableManager.instance.observe(tagify);