ref. #258, #268 Quick fixes and enhancements for tooltips (#271)

* ref. #258, #268 Quick fixes and enhancements for tooltips * Removed doing so many "unless" in templates and instead using a simple javascript function to handle behaviour of tooltips and titles. * Update changelog
2025-10-13 17:10:04 +02:00
parent 21b83f3ea8
commit efda25bf7e
12 changed files with 325 additions and 202 deletions
@@ -2,9 +2,14 @@

 ## Version 1.6.2 - 2025-xx-xx

+### **Features:**
+
+- [#258](https://github.com/deltagreen-foundryvtt/delta-green-foundry-vtt-system/issues/258) - Added a keybind option for hovering tooltips and option to hide all.
+
 ### **Bug Fixes:**

 - [#274] (<https://github.com/deltagreen-foundryvtt/delta-green-foundry-vtt-system/issues/274>) - Automated fail marking now works after dice so nice resolve roll.
+- [#268] (<https://github.com/deltagreen-foundryvtt/delta-green-foundry-vtt-system/issues/268>) - Removed unnecessary tooltips.

 ## Version 1.6.1 - 2025-09-09

@@ -395,8 +395,11 @@
  "DG.Settings.charactersheet.program": "The Program",
  "DG.Settings.sortskills.name": "Sort Skills By Column?",
  "DG.Settings.sortskills.hint": "Checked sorts by column. Unchecked sorts by row.",
-  "DG.Settings.hideSkillTooltips.name": "Hide Skill Tooltips",
-  "DG.Settings.hideSkillTooltips.hint": "Do not display skill tooltips in Agent sheets.",
+  "DG.Settings.skillTooltipDisplay.name": "Display tooltips",
+  "DG.Settings.skillTooltipDisplay.hint": "Choose when to display skill tooltips in Agent sheets.",
+  "DG.Settings.skillTooltipDisplay.hover": "On hover (default)",
+  "DG.Settings.skillTooltipDisplay.never": "Never",
+  "DG.Settings.skillTooltipDisplay.hoverShift": "On hover + Shift",
  "DG.Settings.keepSanityPrivate.name": "Keep Sanity Private",
  "DG.Settings.keepSanityPrivate.hint": "Hide sanity from players in both Agent sheets and rolls.",
  "DG.Settings.skillImprovementFormula.name": "Default Skill Improvement Roll",
@@ -10,8 +10,6 @@ export default class DeltaGreenActor extends Actor {
    super.prepareData();

    const actorData = this;
-    const { system } = actorData;
-    const { flags } = actorData;

    // console.log('actor.js prepareData');
    // console.log(this);
@@ -86,7 +84,7 @@ export default class DeltaGreenActor extends Actor {
      proficiency: 99 - system.sanity.value,
      cannotBeImprovedByFailure: true,
      failure: false,
-    };    
+    };

    if (system.skills.ritual.proficiency > 99) {
      system.skills.ritual.proficiency = 99;
@@ -179,7 +177,7 @@ export default class DeltaGreenActor extends Actor {
      proficiency: 99 - system.sanity.value,
      cannotBeImprovedByFailure: true,
      failure: false,
-    };    
+    };

    if (system.skills.ritual.proficiency > 99) {
      system.skills.ritual.proficiency = 99;
@@ -313,13 +313,20 @@ export default function registerSystemSettings() {
    default: false,
  });

-  game.settings.register("deltagreen", "hideSkillTooltips", {
-    name: game.i18n.localize("DG.Settings.hideSkillTooltips.name"),
-    hint: game.i18n.localize("DG.Settings.hideSkillTooltips.hint"),
+  game.settings.register("deltagreen", "skillTooltipDisplay", {
+    name: game.i18n.localize("DG.Settings.skillTooltipDisplay.name"),
+    hint: game.i18n.localize("DG.Settings.skillTooltipDisplay.hint"),
    scope: "client",
    config: true,
-    type: Boolean,
-    default: false,
+    type: String,
+    choices: {
+      hover: game.i18n.localize("DG.Settings.skillTooltipDisplay.hover"),
+      never: game.i18n.localize("DG.Settings.skillTooltipDisplay.never"),
+      hoverShift: game.i18n.localize(
+        "DG.Settings.skillTooltipDisplay.hoverShift",
+      ),
+    },
+    default: "hover",
    onChange: () => {
      foundry.applications.instances.forEach((app) => {
        if (app instanceof DGActorSheet) {
@@ -83,13 +83,13 @@ export default class DGActorSheet extends DGSheetMixin(ActorSheetV2) {
    this._sortSkills();
    this._sortCustomSkills();

-    // Wether to hide skill tooltips
-    context.hideSkillTooltips = game.settings.get(
+    // Skill tooltip display setting
+    context.skillTooltipDisplay = game.settings.get(
      "deltagreen",
-      "hideSkillTooltips",
+      "skillTooltipDisplay",
    );

-    if (!context.hideSkillTooltips) {
+    if (context.skillTooltipDisplay !== "never") {
      // Setup tooltips
      this._prepareSkillTooltips();
    }
@@ -158,6 +158,8 @@ export default class DGActorSheet extends DGSheetMixin(ActorSheetV2) {
      li.setAttribute("draggable", true);
      li.addEventListener("dragstart", handler, false);
    });
+
+    this._tooltipsSettings(this.element);
  }

  /** @override - Add buttons to the header controls. */
@@ -1356,4 +1358,85 @@ export default class DGActorSheet extends DGSheetMixin(ActorSheetV2) {
    const currentVal = foundry.utils.getProperty(targetDoc, prop);
    targetDoc.update({ [prop]: !currentVal });
  }
+
+  /**
+   * Require Shift while hovering to show tooltips.
+   * Supports either data-tooltip (preferred, may contain HTML) or title (plain text).
+   */
+  _tooltipsSettings(root) {
+    const mode = game.settings.get("deltagreen", "skillTooltipDisplay");
+
+    // If not explicitly hoverShift or never, do nothing.
+    if (mode !== "hoverShift" && mode !== "never") return;
+
+    // Query elements with either data-tooltip OR title
+    const nodes = root.querySelectorAll("[data-tooltip],[title]");
+
+    // If mode is "never": strip native attributes so no tooltips (native or custom) can appear.
+    if (mode === "never") {
+      nodes.forEach((el) => {
+        if (el.dataset.shiftTooltipInstalled === "true") return;
+        el.removeAttribute("data-tooltip");
+        el.removeAttribute("title");
+        el.dataset.shiftTooltipInstalled = "true";
+      });
+      return;
+    }
+
+    // mode === "hoverShift": install Shift-to-show behavior using Foundry's tooltip
+    nodes.forEach((el) => {
+      if (el.dataset.shiftTooltipInstalled === "true") return;
+
+      // Prefer data-tooltip, else use title
+      let html = el.getAttribute("data-tooltip");
+      let isHtml = true;
+
+      if (!html) {
+        const title = el.getAttribute("title");
+        if (title) {
+          html = foundry.utils.escapeHTML(title); // treat title as plain text
+          isHtml = false;
+        }
+      }
+
+      if (!html) return; // nothing usable
+
+      // Remove native attributes so default tooltips don’t trigger
+      el.removeAttribute("data-tooltip");
+      el.removeAttribute("title");
+      el.dataset.shiftTooltipInstalled = "true";
+
+      // Always pass through { html } so <br> etc. render
+      const opts = isHtml ? { html } : { text: html };
+
+      const show = () => game.tooltip.activate(el, opts);
+      const hide = () => game.tooltip.deactivate();
+
+      const onKey = (ev) => {
+        if (ev.key !== "Shift") return;
+        if (!document.body.contains(el)) {
+          window.removeEventListener("keydown", onKey);
+          window.removeEventListener("keyup", onKey);
+          return;
+        }
+        if (ev.type === "keydown") show();
+        else hide();
+      };
+
+      const onEnter = (ev) => {
+        if (ev.shiftKey) show();
+        window.addEventListener("keydown", onKey);
+        window.addEventListener("keyup", onKey);
+      };
+
+      const onLeave = () => {
+        hide();
+        window.removeEventListener("keydown", onKey);
+        window.removeEventListener("keyup", onKey);
+      };
+
+      el.addEventListener("pointerenter", onEnter, { passive: true });
+      el.addEventListener("pointerleave", onLeave, { passive: true });
+    });
+  }
 }
@@ -1,125 +1,141 @@
 <div class="item-controls skill-util-buttons">
-  <a class="item-control typed-skill-add action-pill"
-     data-action="typedSkillAction"
-     data-action-type="create">
-    <i class="fas fa-plus"></i>
-    {{localize 'DG.Skills.AddTypedOrCustomSkill'}}
-  </a>
-
-  <a class="item-control action-pill"
-     data-action="specialTrainingAction"
-     data-action-type="create">
-    <i class="fas fa-plus"></i>
-    {{localize 'DG.SpecialTraining.Dialog.CreateSpecialTraining'}}
-  </a>
-  {{#if_eq actor.type "agent" }}
-    <a class="item-control action-pill" data-action="applySkillImprovements">
-      {{localize 'DG.Skills.ApplySkillImprovements.Title'}}
-      <i class="fas fa-dice"></i>
+    <a class="item-control typed-skill-add action-pill"
+       data-action="typedSkillAction"
+       data-action-type="create">
+        <i class="fas fa-plus"></i>
+        {{localize 'DG.Skills.AddTypedOrCustomSkill'}}
    </a>
-  {{/if_eq}}
+
+    <a class="item-control action-pill"
+       data-action="specialTrainingAction"
+       data-action-type="create">
+        <i class="fas fa-plus"></i>
+        {{localize 'DG.SpecialTraining.Dialog.CreateSpecialTraining'}}
+    </a>
+    {{#if_eq actor.type "agent" }}
+        <a class="item-control action-pill" data-action="applySkillImprovements">
+            {{localize 'DG.Skills.ApplySkillImprovements.Title'}}
+            <i class="fas fa-dice"></i>
+        </a>
+    {{/if_eq}}
 </div>
 <div class="grid-2col">

-  {{#each actor.system.sortedCustomSkills as |skill| }}
-    {{#if_eq type "typeSkill" }}
+    {{#each actor.system.sortedCustomSkills as |skill| }}
+        {{#if_eq type "typeSkill" }}

-      <div class="item flexrow flex-group-left flex-thin-border">
-        <div class="flexrow">
-          <label data-tooltip="{{localize (concat 'DG.TypeSkills.Tooltip.' skill.group)}}">
-            {{localize (concat 'DG.TypeSkills.' skill.group)}} ({{skill.label}})
-          </label>
-          <label class="{{if_gt skill.proficiency 0 'rollable' 'not-rollable'}} skill-label"
-                 data-action="roll"
-                 data-key="{{skill.key}}"
-                 data-rolltype="skill"
-                 data-roll="d100"
-                 data-target="{{skill.proficiency}}"
-                 data-label="{{skill.label}}"
-                 {{#if skill.proficiency }}
-                 data-tooltip="{{localize 'DG.Tooltip.SkillLabel' }}"
-                 {{/if }}
-                 {{#unless skill.proficiency }}
-                 data-tooltip="{{localize 'DG.Tooltip.CannotRollSkillLabel' }}"
-                 {{/unless }}>
-            <i class="fas fa-dice"></i>
-          </label>
-          <input class="percentile-skill-input"
-                 type="text"
-                 name="system.typedSkills.{{skill.key}}.proficiency"
-                 value="{{skill.proficiency}}"
-                 data-dtype="Number" />
-          {{#if_eq skill.actorType "agent" }}
-            <input class="checkbox-skill-input"
-                   type="checkbox"
-                   name="system.typedSkills.{{skill.key}}.failure"
-                   {{checked skill.failure}}
-                   data-dtype="Boolean"
-                   {{#if skill.cannotBeImprovedByFailure }}
-                   disabled
-                   {{/if }} />
-          {{/if_eq}}
-        </div>
-        <div class="item-controls skill-and-training-controls">
-          <a class="item-control"
-             data-action="typedSkillAction"
-             data-action-type="edit"
-             data-typedskill="{{skill.key}}"
-             title="Edit Skill">
-            <i class="fas fa-edit"></i>
-          </a>
-          <a class="item-control"
-             data-action="typedSkillAction"
-             data-action-type="delete"
-             data-typedskill="{{skill.key}}"
-             title="Delete Skill">
-            <i class="fas fa-trash"></i>
-          </a>
-        </div>
-      </div>
+            <div class="item flexrow flex-group-left flex-thin-border">
+                <div class="flexrow">
+                    <label {{#unless (eq ../../skillTooltipDisplay "never") }}
+                           data-tooltip="{{localize (concat 'DG.TypeSkills.Tooltip.' skill.group)}}"
+                           {{/unless }}>
+                        {{localize (concat 'DG.TypeSkills.' skill.group)}} ({{skill.label }})
+                    </label>
+                    <label class="{{if_gt skill.proficiency 0 'rollable' 'not-rollable'}} skill-label"
+                           data-action="roll"
+                           data-key="{{skill.key}}"
+                           data-rolltype="skill"
+                           data-roll="d100"
+                           data-target="{{skill.proficiency}}"
+                           data-label="{{skill.label}}"
+                           {{#unless (eq ../../skillTooltipDisplay "never") }}
+                           {{#if skill.proficiency }}
+                           data-tooltip="{{localize 'DG.Tooltip.SkillLabel' }}"
+                           {{/if }}
+                           {{#unless skill.proficiency }}
+                           data-tooltip="{{localize 'DG.Tooltip.CannotRollSkillLabel' }}"
+                           {{/unless }}
+                           {{/unless }}>
+                        <i class="fas fa-dice"></i>
+                    </label>
+                    <input class="percentile-skill-input"
+                           type="text"
+                           name="system.typedSkills.{{skill.key}}.proficiency"
+                           value="{{skill.proficiency}}"
+                           data-dtype="Number" />
+                    {{#if_eq skill.actorType "agent" }}
+                        <input class="checkbox-skill-input"
+                               type="checkbox"
+                               name="system.typedSkills.{{skill.key}}.failure"
+                               {{checked skill.failure}}
+                               data-dtype="Boolean"
+                               {{#if skill.cannotBeImprovedByFailure }}
+                               disabled
+                               {{/if }} />
+                    {{/if_eq}}
+                </div>
+                <div class="item-controls skill-and-training-controls">
+                    <a class="item-control"
+                       data-action="typedSkillAction"
+                       data-action-type="edit"
+                       data-typedskill="{{skill.key}}"
+                       {{#unless (eq ../../skillTooltipDisplay "never") }}
+                       title="Edit Skill"
+                       {{/unless }}>
+                        <i class="fas fa-edit"></i>
+                    </a>
+                    <a class="item-control"
+                       data-action="typedSkillAction"
+                       data-action-type="delete"
+                       data-typedskill="{{skill.key}}"
+                       {{#unless (eq ../../skillTooltipDisplay "never") }}
+                       title="Delete Skill"
+                       {{/unless }}>
+                        <i class="fas fa-trash"></i>
+                    </a>
+                </div>
+            </div>

-    {{/if_eq}}
+        {{/if_eq}}

-    {{#if_eq type "training" }}
+        {{#if_eq type "training" }}

-      <div class="item flexrow flex-group-left flex-thin-border special-training-box">
-        <div class="flexrow">
-          {{#if_not_eq (localize (concat 'DG.Attributes.' skill.key)) (concat "DG.Attributes." skill.key) }}
-            <label data-tooltip="{{localize (concat 'DG.Attributes.Tooltip.' skill.key)}}">
-              {{skill.name}} ({{localize (concat 'DG.Attributes.' skill.key)}}, {{skill.targetNumber}}%)
-            </label>
-          {{else}}
-            {{#if_not_eq (localize (concat 'DG.Skills.' skill.key)) (concat "DG.Skills." skill.key) }}
-              <label data-tooltip="{{localize (concat 'DG.Skills.Tooltip.' skill.key)}}">
-                {{skill.name}} ({{localize (concat 'DG.Skills.' skill.key)}}, {{skill.targetNumber}}%)
-              </label>
-            {{else}}
-              <label>{{skill.name}} ({{skill.attribute}}, {{skill.targetNumber}}%)</label>
-            {{/if_not_eq}}
-          {{/if_not_eq}}
-          <label class="{{if_gt skill.targetNumber 0 'rollable' 'not-rollable'}}"
-                 data-action="roll"
-                 data-key="{{skill.key}}"
-                 data-name="{{skill.name}}"
-                 data-rolltype="special-training">
-            <i class="fas fa-dice"></i>
-          </label>
-          <div class="item-controls skill-and-training-controls">
-            <a class="item-control"
-               data-action="specialTrainingAction"
-               data-action-type="edit"
-               data-id="{{skill.id}}"
-               title="Edit Training"><i class="fas fa-edit"></i></a>
-            <a class="item-control"
-               data-action="specialTrainingAction"
-               data-action-type="delete"
-               title="Delete Training"
-               data-id="{{skill.id}}"><i class="fas fa-trash"></i></a>
-          </div>
-        </div>
-      </div>
+            <div class="item flexrow flex-group-left flex-thin-border special-training-box">
+                <div class="flexrow">
+                    {{#if_not_eq (localize (concat 'DG.Attributes.' skill.key)) (concat "DG.Attributes." skill.key) }}
+                        <label {{#unless (eq ../../skillTooltipDisplay "never") }}
+                               data-tooltip="{{localize (concat 'DG.Attributes.Tooltip.' skill.key)}}"
+                               {{/unless }}>
+                            {{skill.name}} ({{localize (concat 'DG.Attributes.' skill.key)}}, {{skill.targetNumber}}%)
+                        </label>
+                    {{else}}
+                        {{#if_not_eq (localize (concat 'DG.Skills.' skill.key)) (concat "DG.Skills." skill.key) }}
+                            <label {{#unless (eq ../../skillTooltipDisplay "never") }}
+                                   data-tooltip="{{localize (concat 'DG.Skills.Tooltip.' skill.key)}}"
+                                   {{/unless }}>
+                                {{skill.name}} ({{localize (concat 'DG.Skills.' skill.key)}}, {{skill.targetNumber}}%)
+                            </label>
+                        {{else}}
+                            <label>{{skill.name}} ({{skill.attribute}}, {{skill.targetNumber}}%)</label>
+                        {{/if_not_eq}}
+                    {{/if_not_eq}}
+                    <label class="{{if_gt skill.targetNumber 0 'rollable' 'not-rollable'}}"
+                           data-action="roll"
+                           data-key="{{skill.key}}"
+                           data-name="{{skill.name}}"
+                           data-rolltype="special-training">
+                        <i class="fas fa-dice"></i>
+                    </label>
+                    <div class="item-controls skill-and-training-controls">
+                        <a class="item-control"
+                           data-action="specialTrainingAction"
+                           data-action-type="edit"
+                           data-id="{{skill.id}}"
+                           {{#unless (eq ../../skillTooltipDisplay "never") }}
+                           title="Edit Training"
+                           {{/unless }}><i class="fas fa-edit"></i></a>
+                        <a class="item-control"
+                           data-action="specialTrainingAction"
+                           data-action-type="delete"
+                           {{#unless (eq ../../skillTooltipDisplay "never") }}
+                           title="Delete Training"
+                           {{/unless }}
+                           data-id="{{skill.id}}"><i class="fas fa-trash"></i></a>
+                    </div>
+                </div>
+            </div>

-    {{/if_eq}}
+        {{/if_eq}}

-  {{/each}}
+    {{/each}}
 </div>
@@ -1,27 +1,27 @@
-{{#if (keepSanityPrivate)}}
-<input class="centered"
-       type="text"
-       name="system.sanity.value"
-       value="???"
-       readonly
-       data-dtype="Number" />
-<span>/</span>
-<div class="max-resource-value"
-     data-tooltip="{{localize 'DG.Tooltip.MaximumSanity'}}">
-    <div>???</div>
-</div>
+{{#if (keepSanityPrivate) }}
+    <input class="centered"
+           type="text"
+           name="system.sanity.value"
+           value="???"
+           readonly
+           data-dtype="Number" />
+    <span>/</span>
+    <div class="max-resource-value"
+         data-tooltip="{{localize 'DG.Tooltip.MaximumSanity'}}">
+        <div>???</div>
+    </div>
 {{else}}
-<input class="centered
-              {{#if actor.system.sanity.breakingPointHit }}
-                  breaking-point-hit{{/if }}"
-       type="text"
-       name="system.sanity.value"
-       value="{{actor.system.sanity.value }}"
-       data-dtype="Number"
-       data-tooltip="{{localize 'DG.Tooltip.CurrentSanityPartOne' }}{{actor.system.sanity.currentBreakingPoint }}{{localize 'DG.Tooltip.CurrentSanityPartTwo' }}" />
-<span>/</span>
-<div class="max-resource-value"
-     data-tooltip="{{localize 'DG.Tooltip.MaximumSanity'}}">
-    <div>{{numberFormat actor.system.sanity.max decimals=0 sign=false}}</div>
-</div>
+    <input class="centered
+                  {{#if actor.system.sanity.breakingPointHit }}
+                      breaking-point-hit{{/if }}"
+           type="text"
+           name="system.sanity.value"
+           value="{{actor.system.sanity.value }}"
+           data-dtype="Number"
+           data-tooltip="{{localize 'DG.Tooltip.CurrentSanityPartOne' }}{{actor.system.sanity.currentBreakingPoint }}{{localize 'DG.Tooltip.CurrentSanityPartTwo' }}" />
+    <span>/</span>
+    <div class="max-resource-value"
+         data-tooltip="{{localize 'DG.Tooltip.MaximumSanity'}}">
+        <div>{{numberFormat actor.system.sanity.max decimals=0 sign=false}}</div>
+    </div>
 {{/if}}
@@ -266,11 +266,15 @@
                        <a class="item-control"
                           data-action="itemAction"
                           data-action-type="edit"
-                           title="Edit Item"><i class="fas fa-edit"></i></a>
+                           title="Edit Item">
+                            <i class="fas fa-edit"></i>
+                        </a>
                        <a class="item-control"
                           data-action="itemAction"
                           data-action-type="delete"
-                           title="Delete Item"><i class="fas fa-trash"></i></a>
+                           title="Delete Item">
+                            <i class="fas fa-trash"></i>
+                        </a>
                    </div>
                </li>
            {{/each}}
@@ -341,11 +345,15 @@
                            <a class="item-control"
                               data-action="itemAction"
                               data-action-type="edit"
-                               title="Edit Item"><i class="fas fa-edit"></i></a>
+                               title="Edit Item">
+                                <i class="fas fa-edit"></i>
+                            </a>
                            <a class="item-control"
                               data-action="itemAction"
                               data-action-type="delete"
-                               title="Delete Item"><i class="fas fa-trash"></i></a>
+                               title="Delete Item">
+                                <i class="fas fa-trash"></i>
+                            </a>
                        </div>

                    </li>
@@ -425,11 +433,15 @@
                            <a class="item-control"
                               data-action="itemAction"
                               data-action-type="edit"
-                               title="Edit Item"><i class="fas fa-edit"></i></a>
+                               title="Edit Item">
+                                <i class="fas fa-edit"></i>
+                            </a>
                            <a class="item-control"
                               data-action="itemAction"
                               data-action-type="delete"
-                               title="Delete Item"><i class="fas fa-trash"></i></a>
+                               title="Delete Item">
+                                <i class="fas fa-trash"></i>
+                            </a>
                        </div>

                    </li>
@@ -4,13 +4,13 @@
        <div class="header-top flexrow">
            <img class="profile-img"
                 src="{{actor.img}}"
+                 alt="{{actor.name}}"
                 data-action="editImage"
                 data-edit="img"
-                 data-tooltip="{{actor.name}}"
                 height="150"
                 width="100" />
            <div>
-                <div class="">
+                <div>
                    <h1 class="charname">
                        <input name="name"
                               type="text"
@@ -117,6 +117,7 @@
                               data-action="itemAction"
                               data-action-type="edit"
                               title="Edit Item">
+
                                <i class="fas fa-edit"></i>
                            </a>
                            <a class="item-control"
@@ -24,10 +24,7 @@
                       data-key="{{skill.key}}"
                       data-rolltype="skill"
                       for="system.skills.{{skill.key}}.value"
-                       {{#unless ../hideSkillTooltips }}
-                       data-tooltip="{{ skill.tooltip }}"
-                       {{/unless }}
-                >
+                       data-tooltip="{{ skill.tooltip }}">
                    {{localizeWithFallback (concat "DG.Skills." skill.key) skill.label }}
                    <i class="fas fa-dice"></i>
                </label>
@@ -39,7 +36,6 @@
                       name="system.skills.{{skill.key }}.proficiency"
                       value="{{skill.proficiency }}"
                       data-dtype="Number"
-                       data-tooltip="{{skill.targetProficiency }}"
                       {{disabled skill.isCalculatedValue }} />
                {{#if (eq ../actor.type "agent") }}
                    <input class="checkbox-skill-input"
@@ -9,51 +9,53 @@
    {{!-- Sheet Body motivation-sheet-horizontal-grid-2col --}}
    <section class="sheet-body">

-        <div class="tab attributes top-div-border" data-group="primary" data-tab="attributes">
+        <div class="tab attributes top-div-border"
+             data-group="primary"
+             data-tab="attributes">

            <div class="motivation-sheet-horizontal-grid-2col">
                <span class="resource-label">{{localize 'DG.ItemWindow.Motivations.IsDisorder'}}:</span>
-                <input type="checkbox" name="system.crossedOut" {{checked item.system.crossedOut}} data-dtype="Boolean"
-                    title="{{localize 'DG.ItemWindow.Motivations.IsDisorderTooltip'}}"
-                />
-
-
-
+                <input type="checkbox"
+                       name="system.crossedOut"
+                       {{checked item.system.crossedOut}}
+                       data-dtype="Boolean"
+                       title="{{localize 'DG.ItemWindow.Motivations.IsDisorderTooltip'}}" />
                <span class="resource-label">{{localize 'DG.ItemWindow.Motivations.Motivation'}}:</span>
-                <input type="text" name="name" value="{{item.name}}" placeholder="" data-dtype="String"
+                <input type="text"
+                       name="name"
+                       value="{{item.name}}"
+                       placeholder=""
+                       data-dtype="String"
+                       title="{{localize 'DG.ItemWindow.Motivations.MotivationNameTooltip'}}"
+                       {{!-- If a motivation has been crossed off after a breaking point, do a strikeout on it and disable it. --}}
+                       {{#if item.system.crossedOut }}
+                       style="text-decoration: line-through"
+                       disabled
+                       {{/if }} />
+                {{!-- Only Show the Disorders Section if Motivation Lost Checked --}}
+                {{#if item.system.crossedOut }}

-                     title="{{localize 'DG.ItemWindow.Motivations.MotivationNameTooltip'}}"
-
-                    {{!-- If a motivation has been crossed off after a breaking point, do a strikeout on it and disable it. --}}
-                    {{#if item.system.crossedOut}}
-                        style="text-decoration: line-through;"
-                        disabled
-                    {{/if}}
-                />
-
-
-            {{!-- Only Show the Disorders Section if Motivation Lost Checked --}}
-            {{#if item.system.crossedOut}}
-
-                <span class="resource-label">{{localize 'DG.ItemWindow.Motivations.Disorder'}}:</span>
-                <input type="text" name="system.disorder" value="{{item.system.disorder}}" data-dtype="String"
-
-                    title="{{localize 'DG.ItemWindow.Motivations.DisorderNameTooltip'}}"
-                />
-
-
-                <span class="resource-label">{{localize 'DG.ItemWindow.Motivations.DisorderHasBeenCured'}}: </span>
-                <input class="labeled-resource-checkbox" type="checkbox" name="system.disorderCured" {{checked item.system.disorderCured}} data-dtype="Boolean"
-                    title="{{localize 'DG.ItemWindow.Motivations.DisorderHasBeenCuredTooltip'}}"
-                />
-
-
-            {{/if}}
+                    <span class="resource-label">{{localize 'DG.ItemWindow.Motivations.Disorder'}}:</span>
+                    <input type="text"
+                           name="system.disorder"
+                           value="{{item.system.disorder}}"
+                           data-dtype="String"
+                           title="{{localize 'DG.ItemWindow.Motivations.DisorderNameTooltip'}}" />
+                    <span class="resource-label">{{localize 'DG.ItemWindow.Motivations.DisorderHasBeenCured'}}:</span>
+                    <input class="labeled-resource-checkbox"
+                           type="checkbox"
+                           name="system.disorderCured"
+                           {{checked item.system.disorderCured}}
+                           data-dtype="Boolean"
+                           title="{{localize 'DG.ItemWindow.Motivations.DisorderHasBeenCuredTooltip'}}" />
+                {{/if}}

            </div>
        </div>

-        <div class="tab attributes top-div-border" data-group="primary" data-tab="description">
+        <div class="tab attributes top-div-border"
+             data-group="primary"
+             data-tab="description">
            <div class="editor-host">
                {{editor enrichedDescription target="system.description" engine="prosemirror" button=true owner=owner editable=editable}}
            </div>