Add tooltips for attributes, traits, and combat values

src/lang/de.json

@@ -211,5 +211,8 @@
     "DS4.ChatVisibilityRoll": "Alle",
     "DS4.ChatVisibilityGmRoll": "Selbst & SL",
     "DS4.ChatVisibilityBlindRoll": "Nur SL",
-    "DS4.ChatVisibilitySelfRoll": "Nur selbst"
+    "DS4.ChatVisibilitySelfRoll": "Nur selbst",
+    "DS4.TooltipBaseValue": "Basiswert",
+    "DS4.TooltipModifier": "Modifikator",
+    "DS4.TooltipEffects": "Effekte"
 }

src/lang/en.json

@@ -211,5 +211,8 @@
     "DS4.ChatVisibilityRoll": "All",
     "DS4.ChatVisibilityGmRoll": "Self & GM",
     "DS4.ChatVisibilityBlindRoll": "GM only",
-    "DS4.ChatVisibilitySelfRoll": "Self only"
+    "DS4.ChatVisibilitySelfRoll": "Self only",
+    "DS4.TooltipBaseValue": "Base Value",
+    "DS4.TooltipModifier": "Modifier",
+    "DS4.TooltipEffects": "Effects"
 }

src/module/actor/sheets/actor-sheet.ts

@@ -1,3 +1,4 @@
+import { ModifiableMaybeData } from "../../common/common-data";
 import { DS4 } from "../../config";
 import { DS4Item } from "../../item/item";
 import { DS4ItemData } from "../../item/item-data";
@@ -50,7 +51,7 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
      */
     async getData(): Promise<ActorSheet.Data<DS4Actor>> {
         const data = {
-            ...(await super.getData()),
+            ...this._addTooltipsToData(await super.getData()),
             // Add the localization config to the data:
             config: DS4,
             // Add the items explicitly sorted by type to the data:
@@ -59,6 +60,26 @@ export class DS4ActorSheet extends ActorSheet<ActorSheet.Data<DS4Actor>> {
         return data;
     }
 
+    protected _addTooltipsToData(data: ActorSheet.Data<DS4Actor>): ActorSheet.Data<DS4Actor> {
+        const valueGroups = [data.data.attributes, data.data.traits, data.data.combatValues];
+        valueGroups.forEach((valueGroup) => {
+            Object.values(valueGroup).forEach(
+                (attribute: ModifiableMaybeData<number | null> & { tooltip?: string }) => {
+                    attribute.tooltip = this._getTooltipForValue(attribute);
+                },
+            );
+        });
+        return data;
+    }
+
+    protected _getTooltipForValue(value: ModifiableMaybeData<number | null>): string {
+        return `${value.base ?? 0} (${game.i18n.localize("DS4.TooltipBaseValue")}) + ${
+            value.mod ?? 0
+        } (${game.i18n.localize("DS4.TooltipModifier")}) ➞ ${game.i18n.localize("DS4.TooltipEffects")} ➞ ${
+            value.total ?? 0
+        }`;
+    }
+
     /** @override */
     activateListeners(html: JQuery): void {
         super.activateListeners(html);

src/scss/components/_attributes_traits.scss

@@ -18,6 +18,9 @@
                 grid-column: span 2;
                 line-height: $default-input-height;
             }
+            .attribute-value-arrow {
+                padding: 0 5px;
+            }
         }
     }
     .trait {
@@ -41,6 +44,9 @@
                 grid-column: span 2;
                 line-height: $default-input-height;
             }
+            .trait-value-arrow {
+                padding: 0 5px;
+            }
         }
     }
 }

src/templates/actor/partials/attributes-traits.hbs

@@ -14,10 +14,13 @@
 <div class="attribute flexrow"><label for="data.attributes.body.total"
         class="attribute-label ">{{attribute-label}}</label>
     <div class="attribute-value flex15 grid grid-8col"><input type="number"
-            name="data.attributes.{{attribute-key}}.base" value='{{attribute-data.base}}' data-dtype="Number" /><span> +
+            name="data.attributes.{{attribute-key}}.base" value='{{attribute-data.base}}' data-dtype="Number"
+            title="{{attribute-label}} {{localize 'DS4.TooltipBaseValue'}}" /><span> +
         </span><input type="number" name="data.attributes.{{attribute-key}}.mod" value='{{attribute-data.mod}}'
-            data-dtype="Number" /><span> =
+            data-dtype="Number" title="{{attribute-label}} {{localize 'DS4.TooltipModifier'}}" /><span
-        </span><span class="attribute-value-total">{{attribute-data.total}}</span></div>
+            class="attribute-value-arrow">➞</span><span class="attribute-value-total"
+            title="{{attribute-label}}: {{attribute-data.tooltip}}">{{attribute-data.total}}</span>
+    </div>
 </div>
 {{/inline}}
 
@@ -32,10 +35,11 @@
 {{#*inline "trait"}}
 <div class="trait flexrow"><label for="data.traits.strength.total" class="trait-label">{{trait-label}}</label>
     <div class="trait-value flex15 grid grid-8col"><input type="number" name="data.traits.{{trait-key}}.base"
-            value='{{trait-data.base}}' data-dtype="Number" /><span> +
+            value='{{trait-data.base}}' data-dtype="Number"
-        </span><input type="number" name="data.traits.{{trait-key}}.mod" value='{{trait-data.mod}}'
+            title="{{trait-label}} {{localize 'DS4.TooltipBaseValue'}}" /><span> +
-            data-dtype="Number" /><span> =
+        </span><input type="number" name="data.traits.{{trait-key}}.mod" value='{{trait-data.mod}}' data-dtype="Number"
-        </span><span class="trait-value-total">{{trait-data.total}}</span></div>
+            title="{{trait-label}} {{localize 'DS4.TooltipModifier'}}" /><span class=" trait-value-arrow">➞</span><span
+            class="trait-value-total" title="{{trait-label}}: {{trait-data.tooltip}}">{{trait-data.total}}</span></div>
 </div>
 {{/inline}}
 

src/templates/actor/partials/combat-values.hbs

@@ -7,15 +7,18 @@
 !--
 !-- @param combat-value-key: The key of the combat value
 !-- @param combat-value-data: The data for the attribute
+!-- @param combat-value-label: The label for the attribute
 --}}
 
 {{#*inline "combat-value"}}
 <div class="combat-value-with-formula">
-    <div class="combat-value {{combat-value-key}}"><span class="combat-value-total">{{combat-value-data.total}}</span>
+    <div class="combat-value {{combat-value-key}}" title="{{combat-value-label}}: {{combat-value-data.tooltip}}"><span
+            class="combat-value-total">{{combat-value-data.total}}</span>
     </div>
-    <div class="combat-value-formula flexrow"><span class="combat-value-base">{{combat-value-data.base}}</span><span>+</span><input
+    <div class="combat-value-formula flexrow"><span class="combat-value-base"
+            title="{{combat-value-label}} {{localize 'DS4.TooltipBaseValue'}}">{{combat-value-data.base}}</span><span>+</span><input
             type="number" name="data.combatValues.{{combat-value-key}}.mod" value='{{combat-value-data.mod}}'
-            data-dtype="Number" />
+            data-dtype="Number" title="{{combat-value-label}} {{localize 'DS4.TooltipModifier'}}" />
     </div>
 </div>
 {{/inline}}
@@ -25,6 +28,6 @@
 <div class="combat-values flexrow flex-between">
     {{#each config.i18n.combatValues as |combat-value-label combat-value-key|}}
     {{> combat-value combat-value-key=combat-value-key combat-value-data=(lookup ../data.combatValues
-    combat-value-key)}}
+    combat-value-key) combat-value-label=combat-value-label}}
     {{/each}}
 </div>