[#1564] Convert property attribution to use tooltips

dnd5e.css

@@ -562,56 +562,56 @@ h5 {
 /* ----------------------------------------- */
 /*  Property Attribution                     */
 /* ----------------------------------------- */
-.property-attribution {
-  display: none;
-  position: absolute;
+#tooltip.property-attribution {
+  min-width: 150px;
   padding: 3px;
-  border: 1px solid #000;
-  border-radius: 3px;
   background-color: rgba(0, 0, 0, 0.8);
   backdrop-filter: blur(4px);
-  color: #c9c7b8;
-  text-align: left;
-  z-index: 1;
+  text-align: left !important;
 }
-.property-attribution table {
+#tooltip.property-attribution table {
   margin: 0;
   border: 0;
+  font-size: var(--font-size-14);
+}
+#tooltip.property-attribution table caption {
+  padding-block: 0.25em 0.5em;
+  font-size: var(--font-size-16);
 }
-.property-attribution table tr {
+#tooltip.property-attribution table tr {
   background-color: inherit;
 }
-.property-attribution table td {
+#tooltip.property-attribution table td {
   padding: 3px;
 }
-.property-attribution table tr.total > td {
+#tooltip.property-attribution table tr.total > td {
   font-weight: 600;
   padding-top: 5px;
   border-top: 1px solid #7a7971;
 }
-.property-attribution table td.attribution-value {
+#tooltip.property-attribution table td.attribution-value {
   width: 20%;
   padding-right: 5px;
   text-align: right;
   font-weight: 600;
 }
-.property-attribution table td::before {
+#tooltip.property-attribution table td::before {
   opacity: 0.6;
 }
-.property-attribution table td.mode-1::before {
+#tooltip.property-attribution table td.mode-1::before {
   content: "×";
 }
-.property-attribution table td.mode-2::before {
+#tooltip.property-attribution table td.mode-2::before {
   content: "+";
 }
-.property-attribution table td.mode-2.negative::before {
+#tooltip.property-attribution table td.mode-2.negative::before {
   content: "−";
   margin-right: -1px;
 }
-.property-attribution table td.mode-3::before {
+#tooltip.property-attribution table td.mode-3::before {
   content: "↓";
 }
-.property-attribution table td.mode-4::before {
+#tooltip.property-attribution table td.mode-4::before {
   content: "↑";
 }
 /* ----------------------------------------- */
@@ -828,14 +828,6 @@ h5 {
 .dnd5e.sheet.actor .sheet-header .attributes .attribute input.temphp {
   width: 48%;
 }
-.dnd5e.sheet.actor .sheet-header .attributes .attribute .property-attribution {
-  min-width: 150px;
-  top: 50px;
-  font-family: Signika, sans-serif;
-  font-size: 14px;
-  font-weight: normal;
-  line-height: 1rem;
-}
 .dnd5e.sheet.actor h4.box-title {
   height: 18px;
   line-height: 16px;
@@ -895,12 +887,6 @@ h5 {
   font-weight: 400;
   white-space: nowrap;
 }
-.dnd5e.sheet.actor .attributable {
-  position: relative;
-}
-.dnd5e.sheet.actor .attributable:hover .tooltip {
-  display: block;
-}
 .dnd5e.sheet.actor .ability-scores {
   flex: 0 0 100px;
   align-content: flex-start;

less/actors.less

@@ -109,16 +109,6 @@
         input.temphp {
           width: 48%;
         }
-
-        // Attribution Tooltip
-        .property-attribution {
-          min-width: 150px;
-          top: 50px;
-          font-family: Signika, sans-serif;
-          font-size: 14px;
-          font-weight: normal;
-          line-height: 1rem;
-        }
       }
     }
   }
@@ -195,14 +185,6 @@
     }
   }
 
-  .attributable {
-    position: relative;
-
-    &:hover .tooltip {
-      display: block;
-    }
-  }
-
   /* ----------------------------------------- */
   /*  Ability Scores                           */
   /* ----------------------------------------- */

less/apps.less

@@ -561,21 +561,22 @@ h5 {
 /*  Property Attribution                     */
 /* ----------------------------------------- */
 
-.property-attribution {
-  display: none;
-  position: absolute;
+#tooltip.property-attribution {
+  min-width: 150px;
   padding: 3px;
-  border: 1px solid #000;
-  border-radius: 3px;
   background-color: rgba(0, 0, 0, .8);
   backdrop-filter: blur(4px);
-  color: @colorFaint;
-  text-align: left;
-  z-index: 1;
+  text-align: left !important;
 
   table {
     margin: 0;
     border: 0;
+    font-size: var(--font-size-14);
+
+    caption {
+      padding-block: 0.25em 0.5em;
+      font-size: var(--font-size-16);
+    }
     tr {
       background-color: inherit;
     }

module/applications/actor/base-sheet.mjs

@@ -597,6 +597,7 @@ export default class ActorSheet5e extends ActorSheet {
     html.find(".item-edit").click(this._onItemEdit.bind(this));
 
     // Property attributions
+    html.find("[data-attribution]").mouseover(this._onPropertyAttribution.bind(this));
     html.find(".attributable").mouseover(this._onPropertyAttribution.bind(this));
 
     // Preparation Warnings
@@ -1245,18 +1246,27 @@ export default class ActorSheet5e extends ActorSheet {
    * @private
    */
   async _onPropertyAttribution(event) {
-    const existingTooltip = event.currentTarget.querySelector("div.tooltip");
-    const property = event.currentTarget.dataset.property;
-    if ( existingTooltip || !property ) return;
+    const element = event.target;
+    let property = element.dataset.attribution;
+    if ( !property ) {
+      property = element.dataset.property;
+      if ( !property ) return;
+      foundry.utils.logCompatibilityWarning(
+        "Defining attributable properties on sheets with the `.attributable` class and `data-property` value"
+        + " has been deprecated in favor of a single `data-attribution` value.",
+        { since: "DnD5e 2.2", until: "DnD5e 2.4" }
+      );
+    }
+
     const rollData = this.actor.getRollData({ deterministic: true });
+    const title = game.i18n.localize(element.dataset.attributionCaption);
     let attributions;
     switch ( property ) {
       case "attributes.ac":
         attributions = this._prepareArmorClassAttribution(rollData); break;
     }
     if ( !attributions ) return;
-    const html = await new PropertyAttribution(this.actor, attributions, property).renderTooltip();
-    event.currentTarget.insertAdjacentElement("beforeend", html[0]);
+    new PropertyAttribution(this.actor, attributions, property, {title}).renderTooltip(element);
   }
 
   /* -------------------------------------------- */

module/applications/property-attribution.mjs

@@ -41,13 +41,12 @@ export default class PropertyAttribution extends Application {
 
   /**
    * Render this view as a tooltip rather than a whole window.
-   * @returns {jQuery}  HTML of the rendered tooltip.
+   * @param {HTMLElement} element  The element to which the tooltip should be attached.
    */
-  async renderTooltip() {
+  async renderTooltip(element) {
     const data = this.getData(this.options);
-    let html = await this._renderInner(data);
-    html[0].classList.add("tooltip");
-    return html;
+    const text = (await this._renderInner(data))[0].outerHTML;
+    game.tooltip.activate(element, { text, cssClass: "property-attribution" });
   }
 
   /* -------------------------------------------- */
@@ -60,6 +59,7 @@ export default class PropertyAttribution extends Application {
     else if ( typeof property === "object" && Number.isNumeric(property.value) ) total = property.value;
     const sources = foundry.utils.duplicate(this.attributions);
     return {
+      caption: this.options.title,
       sources: sources.map(entry => {
         if ( entry.label.startsWith("@") ) entry.label = this.getPropertyLabel(entry.label.slice(1));
         if ( (entry.mode === CONST.ACTIVE_EFFECT_MODES.ADD) && (entry.value < 0) ) {

templates/actors/character-sheet.hbs

@@ -96,7 +96,8 @@
                     <a class="config-button" data-action="armor" data-tooltip="{{localize 'DND5E.ArmorConfig'}}">
                         <i class="fas fa-cog"></i>
                     </a>
-                    <div class="attribute-value attributable" data-property="attributes.ac">
+                    <div class="attribute-value" data-attribution="attributes.ac"
+                        data-attribution-caption="DND5E.ArmorClass" data-tooltip-direction="DOWN">
                         <span>{{system.attributes.ac.value}}</span>
                     </div>
                     <footer class="attribute-footer">

templates/actors/npc-sheet.hbs

@@ -72,7 +72,8 @@
                     <a class="config-button" data-action="armor" title="{{localize 'DND5E.ArmorConfig'}}">
                         <i class="fas fa-cog"></i>
                     </a>
-                    <div class="attribute-value attributable" data-property="attributes.ac">
+                    <div class="attribute-value" data-attribution="attributes.ac"
+                        data-attribution-caption="DND5E.ArmorClass" data-tooltip-direction="DOWN">
                         <span>{{system.attributes.ac.value}}</span>
                     </div>
                     <footer class="attribute-footer">

templates/apps/property-attribution.hbs

@@ -1,5 +1,5 @@
-<div class="property-attribution">
-  <table>
+<table>
+  {{#if caption}}<caption>{{caption}}</caption>{{/if}}
   {{#each sources as |source|}}
     <tr>
       <td class="attribution-value mode-{{source.mode}}{{#if source.negative}} negative{{/if}}">
@@ -8,9 +8,8 @@
       <td class="attribution-label">{{source.label}}</td>
     </tr>
   {{/each}}
-    <tr class="total">
-      <td class="attribution-value">{{total}}</td>
-      <td class="attribution-label">{{localize "DND5E.PropertyTotal"}}</td>
-    </tr>
-  </table>
-</div>
+  <tr class="total">
+    <td class="attribution-value">{{total}}</td>
+    <td class="attribution-label">{{localize "DND5E.PropertyTotal"}}</td>
+  </tr>
+</table>