[PR][Feature] Items Tooltips Styles (#1445)

* feat: add basic tooltip style and style domain card template

* feat: change weapon hbs tooltip and increase box-shadow blur

* feat: style armor hbs tooltip

* feat: style consumable hbs tooltip

* feat: style loot hbs tooltip

* feat: style feature hbs tooltip

* bugfix: prevent style conflicts between tooltips

* feat: style action hbs tooltip

* feat: style attack hbs tooltip

* feat: style effect hbs tooltip

* feat: increase tooltip width

* style beatform tooltip, fix unnarmed attack location, add outline border when users use midle click

* feat: add beige outline and box shadow to tooltips to enhance contrast

* bugfix: requested changes

* bugfix: fix typo

* bugfix: fix tooltip breaking interface position

lang/en.json

@@ -2820,6 +2820,7 @@
                 "configureAttribution": "Configure Attribution",
                 "deleteItem": "Delete Item",
                 "immune": "Immune",
+                "middleClick": "[Middle Click] Keep tooltip view",
                 "tokenSize": "The token size used on the canvas"
             }
         }

styles/less/ux/index.less

@@ -1,4 +1,6 @@
 @import './tooltip/tooltip.less';
 @import './tooltip/battlepoints.less';
 @import './tooltip/bordered-tooltip.less';
+@import './tooltip/domain-cards.less';
+
 @import './autocomplete/autocomplete.less';

styles/less/ux/tooltip/domain-cards.less

@@ -0,0 +1,18 @@
+@import '../../utils/colors.less';
+@import '../../utils/fonts.less';
+
+.theme-light .daggerheart.dh-style.tooltip {
+    &.domain-card {
+        .item-icons-list .item-icon img {
+            filter: @bright-beige-filter;
+        }
+    }
+}
+
+.daggerheart.dh-style.tooltip {
+    &.domain-card {
+        .item-icons-list .item-icon img {
+            filter: @golden-filter !important;
+        }
+    }
+}

styles/less/ux/tooltip/tooltip.less

@@ -1,5 +1,246 @@
+@import '../../utils/colors.less';
+@import '../../utils/fonts.less';
+
+#tooltip:has(div.daggerheart.dh-style.tooltip.card-style),
+aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip.card-style) {
+    padding: 0;
+    border: none;
+    border-radius: 10px;
+    height: max-content;
+    max-height: 650px;
+    width: 18rem;
+    background-image: url('../assets/parchments/dh-parchment-dark.png');
+    outline: 1px solid light-dark(@dark-80, @beige-80);
+    box-shadow: 0 0 25px rgba(0, 0, 0, 0.80);
+
+    .tooltip-title {
+        font-size: var(--font-size-20);
+        color: light-dark(@dark-blue, @golden);
+        font-weight: 700;
+        margin-bottom: 5px;
+    }
+
+    .tooltip-subtitle {
+        margin: 0;
+    }
+
+    .tooltip-image {
+        width: 100%;
+        height: 160px;
+        object-fit: cover;
+        mask-image: linear-gradient(180deg, black 88%, transparent 100%);
+    }
+
+    .tooltip-description {
+        font-style: inherit;
+        text-align: inherit;
+        width: 100%;
+        padding: 5px 10px;
+        position: relative;
+        margin-top: 5px;
+
+        &::before {
+            content: '';
+            background: @golden;
+            mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
+            height: 2px;
+            width: calc(100% - 10px);
+        }
+
+        &::before {
+            position: absolute;
+            top: -5px;
+        }
+    }
+
+    .tooltip-tags {
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        width: 100%;
+        padding: 5px 10px;
+        position: relative;
+        padding-top: 10px;
+        max-height: 150px;
+        overflow-y: auto;
+        position: relative;
+
+        scrollbar-width: thin;
+        scrollbar-color: light-dark(@dark-blue, @golden) transparent;
+
+        &::before {
+            content: '';
+            background: @golden;
+            mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
+            height: 2px;
+            width: calc(100% - 10px);
+        }
+
+        &::before {
+            position: absolute;
+            top: 0px;
+        }
+
+        .tooltip-tag {
+            display: flex;
+            gap: 10px;
+            flex-direction: column;
+
+            .tooltip-tag-label-container {
+                display: flex;
+                align-items: center;
+                gap: 5px;
+
+                img {
+                    width: 40px;
+                    height: 40px;
+                    border-radius: 3px;
+                }
+            }
+        }
+    }
+
+    .tags {
+        display: flex;
+        gap: 5px 10px;
+        padding-bottom: 16px;
+        flex-wrap: wrap;
+        justify-content: center;
+
+        &.advantages {
+            width: 100%;
+            padding: 5px 10px;
+            padding-bottom: 16px;
+            position: relative;
+            margin-top: 5px;
+
+            &::before {
+                content: '';
+                background: @golden;
+                mask-image: linear-gradient(270deg, transparent 0%, black 50%, transparent 100%);
+                height: 2px;
+                width: calc(100% - 10px);
+            }
+
+            &::before {
+                position: absolute;
+                top: -5px;
+            }
+
+            .tag {
+                background: @green-10;
+                color: @green;
+                border-color: @green;
+            }
+        }
+
+        .tag {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 3px 5px;
+            font-size: var(--font-size-12);
+            font: @font-body;
+
+            background: light-dark(@dark-15, @beige-15);
+            border: 1px solid light-dark(@dark, @beige);
+            border-radius: 3px;
+        }
+
+        .label {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            font-size: var(--font-size-12);
+        }
+    }
+
+    .item-icons-list {
+        position: absolute;
+        display: flex;
+        flex-direction: column;
+        gap: 5px;
+        align-items: end;
+        justify-content: center;
+        top: 25px;
+        right: 10px;
+        z-index: 1;
+
+        .item-icon {
+            display: flex;
+            align-items: center;
+            justify-content: end;
+            text-align: center;
+            padding-right: 8px;
+            width: 50px;
+            height: 50px;
+            font-size: 1.2rem;
+            background: light-dark(@dark-blue-60, @dark-golden-80);
+            backdrop-filter: blur(8px);
+            border: 4px double light-dark(@beige, @golden);
+            color: light-dark(@beige, @golden);
+            border-radius: 999px;
+            transition: all 0.3s ease;
+
+            .recall-label {
+                font-size: var(--font-size-14);
+                opacity: 0;
+                margin-right: 0.3rem;
+                transition: all 0.3s ease;
+            }
+
+            i {
+                font-size: 0.8rem;
+            }
+
+            img {
+                height: 24px;
+                width: 24px;
+            }
+
+            &:hover {
+                max-width: 300px;
+                padding: 0 10px;
+                border-radius: 60px;
+
+                .recall-label {
+                    opacity: 1;
+                }
+            }
+        }
+    }
+
+    .tooltip-hint {
+        border-radius: 3px;
+        padding: 3px;
+        background: light-dark(@dark-blue-60, @rustic-brown-80);
+        color: light-dark(@dark-blue, @golden);
+        font-size: 12px;
+        margin-bottom: 10px;
+    }
+}
+
+aside[role='tooltip'].locked-tooltip:has(div.daggerheart.dh-style.tooltip.card-style) {
+    box-shadow: 0 0 25px @golden-90;
+    outline: 1px solid light-dark(@dark-blue, @golden);
+}
+
+.theme-light #tooltip:has(div.daggerheart.dh-style.tooltip.card-style),
+.theme-light aside[role='tooltip']:has(div.daggerheart.dh-style.tooltip.card-style) {
+    background-image: url('../assets/parchments/dh-parchment-light.png');
+}
+
+.theme-light aside[role='tooltip'].locked-tooltip:has(div.daggerheart.dh-style.tooltip) {
+    box-shadow: 0 0 25px @dark-blue-90;
+    outline: 1px solid light-dark(@dark-blue, @golden);
+    
+}
+
 #tooltip,
-.locked-tooltip {
+.locked-tooltip,
+.daggerheart.dh-style.tooltip {
     &.wide {
         max-width: 480px;
 
@@ -48,11 +289,6 @@
             font-style: italic;
         }
 
-        .tooltip-sub-title {
-            margin: 0;
-            color: light-dark(@dark-blue, @beige);
-        }
-
         .tooltip-information-section {
             width: 100%;
             display: grid;
@@ -104,46 +340,6 @@
             }
         }
 
-        .tooltip-tags {
-            width: 100%;
-            display: flex;
-            flex-direction: column;
-            gap: 4px;
-
-            .tooltip-tag {
-                width: 100%;
-                display: grid;
-                grid-template-columns: 80px 1fr;
-                align-items: start;
-                gap: 8px;
-                padding: 4px;
-                border: 1px solid light-dark(@dark-blue, @golden);
-                border-radius: 6px;
-
-                .tooltip-tag-label-container {
-                    display: flex;
-                    align-items: center;
-                    flex-direction: column;
-                    gap: 2px;
-
-                    .tooltip-tag-image {
-                        width: 40px;
-                        height: 40px;
-                    }
-                }
-
-                .tooltip-tag-label {
-                    font-weight: bold;
-                    text-align: center;
-                }
-
-                .tooltip-tag-description {
-                    display: flex;
-                    flex-wrap: wrap;
-                }
-            }
-        }
-
         .spaced {
             margin-bottom: 4px;
         }

templates/ui/tooltip/action.hbs

@@ -1,82 +1,67 @@
-<div class="daggerheart dh-style tooltip">
-    <h2 class="tooltip-title">{{localize item.name}}</h2>
+<div class="daggerheart dh-style tooltip card-style">
     <img class="tooltip-image" src="{{item.img}}" />
-    <div class="tooltip-description">{{{description}}}</div>
-    {{#if item.uses.max}}
-        <h4 class="tooltip-sub-title">{{localize "DAGGERHEART.GENERAL.uses"}}</h4>
-        <div class="tooltip-information-section triple spaced">
-            <div class="tooltip-information">
-                <label>{{localize "DAGGERHEART.GENERAL.used"}}</label>
-                <div>{{item.uses.value}}</div>
+    <h2 class="tooltip-title">{{localize item.name}}</h2>
+    <div class="tags">
+        {{#if item.uses.max}}
+            <div class="tag">
+              <span>{{localize "DAGGERHEART.GENERAL.used"}} {{item.uses.value}}</span>
             </div>
-            <div class="tooltip-information">
-                <label>{{localize "DAGGERHEART.GENERAL.max"}}</label>
-                <div>{{formulaValue item.uses.max item}}</div>
+            <div class="tag">
+              <span>{{localize "DAGGERHEART.GENERAL.max"}} {{formulaValue item.uses.max item}}</span>
             </div>
-            <div class="tooltip-information">
-                <label>{{localize "DAGGERHEART.GENERAL.recovery"}}</label>
-                {{#with (lookup config.GENERAL.refreshTypes item.uses.recovery) as | type |}}
-                    <div>{{localize type.label}}</div>
-                {{/with}}
+            <div class="tag">
+              <span>{{localize "DAGGERHEART.GENERAL.recovery"}} {{#with (lookup config.GENERAL.refreshTypes item.uses.recovery) as | type |}}{{localize type.label}}{{/with}}</span>
             </div>
-        </div>
-    {{/if}}
-
-    {{#if (gt item.cost.length 0)}}
-        <h4 class="tooltip-sub-title">{{localize "DAGGERHEART.GENERAL.Cost.plural"}}</h4>
-        {{#each item.cost as | cost |}}
-            <div class="tooltip-information-section border spaced">
-                <div class="tooltip-information">
-                    <label>{{localize "Type"}}</label>
-                    {{#with (lookup @root.config.GENERAL.abilityCosts cost.type) as | type |}}
-                        <div>{{localize type.label}}</div>
-                    {{/with}}
+        {{/if}}
+        {{#if (gt item.cost.length 0)}}
+            {{#each item.cost as | cost |}}
+                <div class="tag">
+                  <span>{{localize "Type"}} {{#with (lookup @root.config.GENERAL.abilityCosts cost.type) as | type |}}{{localize type.label}}{{/with}}</span>
                 </div>
-                <div class="tooltip-information">
-                    <label>{{localize "DAGGERHEART.GENERAL.value"}}</label>
-                    <div>{{cost.value}}</div>
+                <div class="tag">
+                  <span>{{localize "DAGGERHEART.GENERAL.value"}} {{cost.value}}</span>
                 </div>
                 {{#if cost.scalable}}
-                    <div class="tooltip-information">
-                        <label>{{localize "DAGGERHEART.GENERAL.scalable"}}</label>
-                        <div>{{localize "DAGGERHEART.GENERAL.true"}}</div>
-                    </div>
-                    <div class="tooltip-information">
-                        <label>{{localize "DAGGERHEART.GENERAL.value"}}</label>
-                        <div>{{cost.step}}</div>
-                    </div>
+                  <div class="tag">
+                    <span>{{localize "DAGGERHEART.GENERAL.scalable"}} {{localize "DAGGERHEART.GENERAL.true"}}</span>
+                  </div>
+                  <div class="tag">
+                    <span>{{localize "DAGGERHEART.GENERAL.step"}} {{cost.step}}</span>
+                  </div>
                 {{/if}}
+            {{/each}}
+        {{/if}}
+        {{#if (or item.range item.target)}}
+            <div class="tag">
+              <span>
+                  {{localize "DAGGERHEART.GENERAL.range"}} 
+                  {{#if item.range}}
+                      {{#with (lookup @root.config.GENERAL.range item.range) as | range |}}
+                          {{localize range.label}}
+                      {{/with}}
+                  {{else}}
+                      {{localize "DAGGERHEART.GENERAL.none"}}
+                  {{/if}}
+              </span>
             </div>
-        {{/each}}
-    {{/if}}
-
-    {{#if (or item.range item.target)}}
-        <h4 class="tooltip-sub-title">{{localize "DAGGERHEART.UI.Tooltip.rangeAndTarget"}}</h4>
-        <div class="tooltip-information-section border spaced">
-            <div class="tooltip-information">
-                <label>{{localize "DAGGERHEART.GENERAL.range"}}</label>
-                <div>
-                    {{#if item.range}}
-                        {{#with (lookup @root.config.GENERAL.range item.range) as | range |}}
-                            <div>{{localize range.label}}</div>
-                        {{/with}}
-                    {{else}}
-                        <div>{{localize "DAGGERHEART.GENERAL.none"}}</div>
-                    {{/if}}
-                </div>
-            </div>
-            <div class="tooltip-information">
-                <label>{{localize "DAGGERHEART.GENERAL.Target.single"}}</label>
-                <div>
-                    {{#if item.target.type}}
-                        {{#with (lookup @root.config.ACTIONS.targetTypes item.target.type) as | target |}}
-                            <div>{{@root.item.target.amount}} {{localize target.label}}</div>
-                        {{/with}}
-                    {{else}}
-                        <div>{{localize "DAGGERHEART.GENERAL.none"}}</div>
-                    {{/if}}
-                </div>
-            </div>
+        {{/if}}
+        <div class="tag">
+          <span>
+              {{localize "DAGGERHEART.GENERAL.Target.single"}} 
+              {{#if item.target.type}}
+                  {{#with (lookup @root.config.ACTIONS.targetTypes item.target.type) as | target |}}
+                      {{@root.item.target.amount}} {{localize target.label}}
+                  {{/with}}
+              {{else}}
+                  {{localize "DAGGERHEART.GENERAL.none"}}
+              {{/if}}
+          </span>
         </div>
+    </div>
+    {{#if description}}
+        <div class="tooltip-description">{{{description}}}</div>
     {{/if}}
+    <p class="tooltip-hint">
+        <i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.Tooltip.middleClick"}}
+    </p>
 </div>

templates/ui/tooltip/armor.hbs

@@ -1,21 +1,22 @@
-<div class="daggerheart dh-style tooltip">
-    <h2 class="tooltip-title">{{item.name}}</h2>
+<div class="daggerheart dh-style tooltip armor card-style">
     <img class="tooltip-image" src="{{item.img}}" />
-    <div class="tooltip-description">{{{description}}}</div>
-
-    <div class="tooltip-information-section">
-        <div class="tooltip-information full-width">
-            <label>{{localize "DAGGERHEART.ITEMS.Armor.baseScore"}}</label>
-            <div>{{item.system.baseScore}}</div>
+    <h2 class="tooltip-title">{{item.name}}</h2>
+    <div class="tags">
+        <div class="tag">
+          <span>{{localize "DAGGERHEART.ITEMS.Armor.baseScore"}} {{item.system.baseScore}}</span>
         </div>
-        
-        <div class="tooltip-information">
-            <label>{{localize "DAGGERHEART.ITEMS.Armor.baseThresholds.major"}}</label>
-            <div>{{item.system.baseThresholds.major}}</div>
+        <div class="tag">
+          <span>{{localize "DAGGERHEART.ITEMS.Armor.baseThresholds.major"}} {{item.system.baseThresholds.major}}</span>
         </div>
-        <div class="tooltip-information">
-            <label>{{localize "DAGGERHEART.ITEMS.Armor.baseThresholds.severe"}}</label>
-            <div>{{item.system.baseThresholds.severe}}</div>
+        <div class="tag">
+          <span>{{localize "DAGGERHEART.ITEMS.Armor.baseThresholds.severe"}} {{item.system.baseThresholds.severe}}</span>
         </div>
     </div>
+    {{#if description}}
+        <div class="tooltip-description">{{{description}}}</div>
+    {{/if}}
+
+    <p class="tooltip-hint">
+        <i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.Tooltip.middleClick"}}
+    </p>
 </div>

templates/ui/tooltip/attack.hbs

@@ -1,35 +1,36 @@
-<div class="daggerheart dh-style tooltip">
-    <h2 class="tooltip-title">{{attack.name}}</h2>
+<div class="daggerheart dh-style tooltip card-style">
     <img class="tooltip-image" src="{{attack.img}}" />
-    <div class="tooltip-description">{{{description}}}</div>
-
-    <div class="tooltip-information-section spaced">
-
+    <h2 class="tooltip-title">{{localize attack.name}}</h2>
+    <div class="tags">
         {{#if (lookup config.ACTOR.abilities attack.roll.trait)}}
-            <div class="tooltip-information">
-                <label>{{localize "DAGGERHEART.GENERAL.Trait.single"}}</label>
-                {{#with (lookup config.ACTOR.abilities attack.roll.trait) as | trait |}}
-                    <div>{{localize trait.label}}</div>
-                {{/with}}
+            <div class="tag">
+                <span>
+                    {{localize "DAGGERHEART.GENERAL.Trait.single"}}
+                    {{#with (lookup config.ACTOR.abilities attack.roll.trait) as | trait |}}
+                        {{localize trait.label}}
+                    {{/with}}
+                </span>
             </div>
         {{/if}}
-
         {{#if (lookup config.GENERAL.range attack.range)}}
-            <div class="tooltip-information">
-                <label>{{localize "DAGGERHEART.GENERAL.range"}}</label>
-                {{#with (lookup config.GENERAL.range attack.range) as | range |}}
-                    <div>{{localize range.label}}</div>
-                {{/with}}
+            <div class="tag">
+                <span>
+                    {{localize "DAGGERHEART.GENERAL.range"}}
+                    {{#with (lookup config.GENERAL.range attack.range) as | range |}}
+                        {{localize range.label}}
+                    {{/with}}
+                </span>
             </div>
         {{/if}}
-
-        <div class="tooltip-information">
-            <label>{{localize "DAGGERHEART.GENERAL.damage"}}</label>
-            <div>{{{damageFormula attack}}}</div>
-        </div>
-        <div class="tooltip-information">
-            <label>{{localize "DAGGERHEART.GENERAL.damageType"}}</label>
-            <div>{{{damageSymbols attack.damage.parts}}}</div>
+        <div class="tag">
+            <span>{{{damageFormula attack}}} {{{damageSymbols attack.damage.parts}}}</span>
         </div>
     </div>
+    {{#if description}}
+        <div class="tooltip-description">{{{description}}}</div>
+    {{/if}}
+
+    <p class="tooltip-hint">
+        <i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.Tooltip.middleClick"}}
+    </p>
 </div>

templates/ui/tooltip/beastform.hbs

@@ -1,31 +1,41 @@
-<div class="daggerheart dh-style tooltip">
-    <h2 class="tooltip-title">{{item.name}}</h2>
+<div class="daggerheart dh-style tooltip card-style">
     <img class="tooltip-image" src="{{item.img}}" />
-    <div class="tooltip-description">{{{description}}}</div>
+    <h2 class="tooltip-title">{{item.name}}</h2>
+    <p class="tooltip-subtitle"><i>{{item.system.examples}}</i></p>
 
-    <div class="simple-info">{{item.system.examples}}</div>
-    {{> "systems/daggerheart/templates/ui/tooltip/parts/tooltipChips.hbs" chips=item.system.advantageOn label=(localize "DAGGERHEART.ITEMS.Beastform.FIELDS.advantageOn.label")}}
+    {{#if description}}
+        <div class="tooltip-description">{{{description}}}</div>
+    {{/if}}
 
-    <div class="tooltip-information-section spaced">
-        {{#with item.system.beastformAttackData}}
-            <div class="tooltip-information">
-                <label>{{localize "DAGGERHEART.ITEMS.Beastform.mainTrait"}}</label>
-                <div>{{this.trait}}</div>
+    <div class="tags">
+        {{#with item.system.beastformAttackData}} 
+            <div class="tag">
+                <span>{{localize "DAGGERHEART.ITEMS.Beastform.mainTrait"}} {{this.trait}}</span>
             </div>
-            <div class="tooltip-information">
-                <label>{{localize "DAGGERHEART.ITEMS.Beastform.traitBonus"}}</label>
-                <div>{{this.traitBonus}}</div>
+            <div class="tag">
+                <span>{{localize "DAGGERHEART.ITEMS.Beastform.traitBonus"}} {{this.traitBonus}}</span>
             </div>
-            <div class="tooltip-information">
-                <label>{{localize "DAGGERHEART.GENERAL.evasion"}}</label>
-                <div>{{this.evasionBonus}}</div>
+            <div class="tag">
+                <span>{{localize "DAGGERHEART.GENERAL.evasion"}} {{this.evasionBonus}}</span>
             </div>
-            <div class="tooltip-information">
-                <label>{{localize "DAGGERHEART.GENERAL.damage"}}</label>
-                <div>{{concat this.damageDice ' ' this.damageBonus}} <i class="fa-solid fa-hand-fist"></i></div>
+            <div class="tag">
+                <span>{{localize "DAGGERHEART.GENERAL.damage"}} {{concat this.damageDice ' ' this.damageBonus}} <i class="fa-solid fa-hand-fist"></i></span>
             </div>
         {{/with}}
     </div>
 
+    <h2 class="tooltip-title">{{localize "DAGGERHEART.ITEMS.Beastform.FIELDS.advantageOn.label"}}</h2>
+    <div class="tags advantages">
+        {{#each item.system.advantageOn as | chip |}}
+            <div class="tag">
+                <span>{{ifThen chip.value chip.value chip}}</span>
+            </div>
+        {{/each}}
+    </div>
+
     {{> "systems/daggerheart/templates/ui/tooltip/parts/tooltipTags.hbs" features=item.system.features label=(localize "DAGGERHEART.GENERAL.features")}}
+
+    <p class="tooltip-hint">
+        <i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.Tooltip.middleClick"}}
+    </p>
 </div>

templates/ui/tooltip/consumable.hbs

@@ -1,12 +1,16 @@
-<div class="daggerheart dh-style tooltip">
-    <h2 class="tooltip-title">{{item.name}}</h2>
+<div class="daggerheart dh-style tooltip card-style">
     <img class="tooltip-image" src="{{item.img}}" />
-    <div class="tooltip-description">{{{description}}}</div>
-
-    <div class="tooltip-information-section">
-        <div class="tooltip-information full-width">
-            <label>{{localize "DAGGERHEART.GENERAL.quantity"}}</label>
-            <div>{{item.system.quantity}}</div>
+    <h2 class="tooltip-title">{{item.name}}</h2>
+    <div class="tags">
+        <div class="tag">
+          <span>{{localize "DAGGERHEART.GENERAL.quantity"}} {{item.system.quantity}}</span>
         </div>
     </div>
+    {{#if description}}
+        <div class="tooltip-description">{{{description}}}</div>
+    {{/if}}
+
+    <p class="tooltip-hint">
+        <i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.Tooltip.middleClick"}}
+    </p>
 </div>

templates/ui/tooltip/domainCard.hbs

@@ -1,29 +1,32 @@
-<div class="daggerheart dh-style tooltip">
-    <h2 class="tooltip-title">{{item.name}}</h2>
+<div class="daggerheart dh-style tooltip domain-card card-style">
+    <div class="item-icons-list">
+        <span class="item-icon">
+            <span class="recall-value">{{item.system.recallCost}}</span>
+            <i class="fa-solid fa-bolt"></i>
+        </span>
+        <span class="item-icon">
+            {{#with (lookup config.DOMAIN.domains item.system.domain) as | domain |}}
+                <img src="{{domain.src}}" alt="">
+            {{/with}}
+        </span>
+    </div>
     <img class="tooltip-image" src="{{item.img}}" />
-    <div class="tooltip-description">{{{description}}}</div>
-
-    <div class="tooltip-information-section">
-        <div class="tooltip-information">
-            <label>{{localize "DAGGERHEART.GENERAL.Domain.single"}}</label>
-            {{#with (lookup allDomains item.system.domain) as | domain |}}
-                <div>{{localize domain.label}}</div>
-            {{/with}}
-        </div>
-        
-        <div class="tooltip-information">
-            <label>{{localize "Type"}}</label>
+    <h2 class="tooltip-title">{{item.name}}</h2>
+    <div class="tags">
+        <div class="tag">
             {{#with (lookup config.DOMAIN.cardTypes item.system.type) as | type |}}
-                <div>{{localize type.label}}</div>
+                <span>{{localize type.label}}</span>
             {{/with}}
         </div>
-        <div class="tooltip-information">
-            <label>{{localize "DAGGERHEART.GENERAL.level"}}</label>
-            <div>{{item.system.level}}</div>
-        </div>
-        <div class="tooltip-information">
-            <label>{{localize "DAGGERHEART.ITEMS.DomainCard.recallCost"}}</label>
-            <div>{{item.system.recallCost}}</div>
+        <div class="tag">
+            <span>{{localize 'DAGGERHEART.GENERAL.levelShort'}} {{ item.system.level }}</span>
         </div>
     </div>
+    {{#if description}}      
+      <div class="tooltip-description">{{{description}}}</div>
+    {{/if}}
+
+    <p class="tooltip-hint">
+        <i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.Tooltip.middleClick"}}
+    </p>
 </div>

templates/ui/tooltip/effect.hbs

@@ -1,5 +1,7 @@
-<div class="daggerheart dh-style tooltip">
-    <h2 class="tooltip-title">{{item.name}}</h2>
+<div class="daggerheart dh-style tooltip card-style">
     <img class="tooltip-image" src="{{item.img}}" />
-    <div class="tooltip-description">{{{description}}}</div>
+    <h2 class="tooltip-title">{{item.name}}</h2>
+    {{#if description}}
+        <div class="tooltip-description">{{{description}}}</div>
+    {{/if}}
 </div>

templates/ui/tooltip/feature.hbs

@@ -1,5 +1,12 @@
-<div class="daggerheart dh-style tooltip">
-    <h2 class="tooltip-title">{{item.name}}</h2>
+<div class="daggerheart dh-style tooltip card-style">
     <img class="tooltip-image" src="{{item.img}}" />
-    <div class="tooltip-description">{{{description}}}</div>
+    <h2 class="tooltip-title">{{item.name}}</h2>
+    <div class="tags">
+      <div class="tag">
+        <span>{{localize 'TYPES.Item.feature'}}</span>
+      </div>
+    </div>
+    {{#if description}}
+        <div class="tooltip-description">{{{description}}}</div>
+    {{/if}}
 </div>

templates/ui/tooltip/loot.hbs

@@ -1,7 +1,9 @@
-<div class="daggerheart dh-style tooltip">
-    <h2 class="tooltip-title">{{item.name}}</h2>
+<div class="daggerheart dh-style tooltip card-style">
     <img class="tooltip-image" src="{{item.img}}" />
-    <div class="tooltip-description">{{{description}}}</div>
+    <h2 class="tooltip-title">{{item.name}}</h2>
+    {{#if description}}
+        <div class="tooltip-description">{{{description}}}</div>
+    {{/if}}
 
     {{> "systems/daggerheart/templates/ui/tooltip/parts/tooltipTags.hbs" features=item.system.actions isAction=true label=(localize "DAGGERHEART.GENERAL.Action.plural") }}
 </div>

templates/ui/tooltip/parts/tooltipTags.hbs

@@ -1,12 +1,12 @@
-{{#if (gt features.length 0)}}<h4 class="tooltip-sub-title">{{label}}</h4>{{/if}}
+{{#if (gt features.length 0)}}<h2 class="tooltip-title">{{label}}</h2>{{/if}}
 <div class="tooltip-tags">
     {{#each features as | feature |}}
         {{#with (ifThen ../isAction feature (ifThen feature.item feature.item feature))}}
             <div class="tooltip-tag">
                 <div class="tooltip-tag-label-container">
-                        <div class="tooltip-tag-label">{{localize this.name}}</div>
                         {{#if this.img}}<img class="tooltip-tag-image" src="{{this.img}}" />{{/if}}
-                    </div>
+                        <span class="tooltip-tag-label">{{localize this.name}}</span>
+                </div>
                 <div class="tooltip-tag-description">{{{localize (ifThen this.enrichedDescription this.enrichedDescription this.system.enrichedDescription)}}}</div>
             </div>
         {{/with}}

templates/ui/tooltip/weapon.hbs

@@ -1,40 +1,36 @@
-<div class="daggerheart dh-style tooltip">
-    <h2 class="tooltip-title">{{item.name}}</h2>
+<div class="daggerheart dh-style tooltip weapon card-style">
     <img class="tooltip-image" src="{{item.img}}" />
-    <div class="tooltip-description">{{{description}}}</div>
-
-    <div class="tooltip-information-section">
-        <div class="tooltip-information">
-            <label>{{localize "DAGGERHEART.ITEMS.Weapon.weaponType"}}</label>
-            <div>{{#if item.system.secondary}}{{localize "DAGGERHEART.ITEMS.Weapon.secondaryWeapon"}}{{else}}{{localize "DAGGERHEART.ITEMS.Weapon.primaryWeapon"}}{{/if}}</div>
+    <h2 class="tooltip-title">{{item.name}}</h2>
+    <div class="tags">
+        <div class="tag">
+            <span>{{#if item.system.secondary}}{{localize "DAGGERHEART.ITEMS.Weapon.secondaryWeapon"}}{{else}}{{localize "DAGGERHEART.ITEMS.Weapon.primaryWeapon"}}{{/if}}</span>
         </div>
-        <div class="tooltip-information">
-            <label>{{localize "DAGGERHEART.GENERAL.burden"}}</label>
+        <div class="tag">
             {{#with (lookup config.GENERAL.burden item.system.burden) as | burden |}}
-                <div>{{localize burden.label}}</div>
+                <span>{{localize burden.label}}</span>
             {{/with}}
         </div>
         {{#if item.system.attack.roll.trait}}
-            <div class="tooltip-information">
-                <label>{{localize "DAGGERHEART.GENERAL.Trait.single"}}</label>
+            <div class="tag">
                 {{#with (lookup config.ACTOR.abilities item.system.attack.roll.trait) as | trait |}}
-                    <div>{{localize trait.label}}</div>
+                    <span>{{localize trait.label}}</span>
                 {{/with}}
             </div>
         {{/if}}
-        <div class="tooltip-information">
-            <label>{{localize "DAGGERHEART.GENERAL.range"}}</label>
+        <div class="tag">
             {{#with (lookup config.GENERAL.range item.system.attack.range) as | range |}}
-                <div>{{localize range.label}}</div>
+                <span>{{localize range.label}}</span>
             {{/with}}
         </div>
-        <div class="tooltip-information">
-            <label>{{localize "DAGGERHEART.GENERAL.damage"}}</label>
-            <div>{{{damageFormula item.system.attack}}}</div>
-        </div>
-        <div class="tooltip-information">
-            <label>{{localize "DAGGERHEART.GENERAL.damageType"}}</label>
-            <div>{{{damageSymbols item.system.attack.damage.parts}}}</div>
+        <div class="tag">
+          <span>{{{damageFormula item.system.attack}}} {{{damageSymbols item.system.attack.damage.parts}}}</span>
         </div>
     </div>
+    {{#if description}}
+        <div class="tooltip-description">{{{description}}}</div>
+    {{/if}}
+
+    <p class="tooltip-hint">
+        <i class="fa-solid fa-computer-mouse"></i> {{localize "DAGGERHEART.UI.Tooltip.middleClick"}}
+    </p>
 </div>