Replaced moving description in items by a big popup on hover.

CHANGELOG.md

@@ -1,7 +1,9 @@
 # Changelog
 
-## 1.3.2 - Something new
+## 1.3.2 - Bubble Everywhere
+- Replaced moving description in items by a big popup on hover.
 - Added English/French Journal Compendiums for Conditions and Terrain Qualities (thanks to TesserWract).
+- Added FoV Terrain Compendium
 
 ## 1.3.1 - Empty Sheet Scholar Helper
 - Added English/French Journal Compendiums for School Curriculums.

system/scripts/actors/base-sheet.js

@@ -281,7 +281,7 @@ export class BaseSheetL5r5e extends ActorSheet {
         super.activateListeners(html);
 
         // Commons
-        game.l5r5e.HelpersL5r5e.commonListeners(html);
+        game.l5r5e.HelpersL5r5e.commonListeners(html, this.actor);
 
         // *** Everything below here is only needed if the sheet is editable ***
         if (!this.options.editable) {
@@ -446,30 +446,12 @@ export class BaseSheetL5r5e extends ActorSheet {
         event.preventDefault();
         event.stopPropagation();
 
-        let item;
+        game.l5r5e.HelpersL5r5e.getEmbedItemByEvent(event, this.actor).then((item) => {
-        const itemId = $(event.currentTarget).data("item-id");
+            if (item) {
-        if (!itemId) {
-            return;
-        }
-
-        const itemParentId = $(event.currentTarget).data("item-parent-id");
-        if (itemParentId) {
-            // Embed Item
-            const parentItem = this.actor.items.get(itemParentId);
-            if (!parentItem) {
-                return;
-            }
-            item = parentItem.items.get(itemId);
-        } else {
-            // Regular item
-            item = this.actor.items.get(itemId);
-        }
-
-        if (!item) {
-            return;
-        }
                 item.sheet.render(true);
             }
+        });
+    }
 
     /**
      * Delete a generic item with sub type

system/scripts/helpers.js

@@ -366,8 +366,9 @@ export class HelpersL5r5e {
     /**
      * Subscribe to common events from the sheet.
      * @param {jQuery} html HTML content of the sheet.
+     * @param {Actor} actor Actor Object
      */
-    static commonListeners(html) {
+    static commonListeners(html, actor = null) {
         // Toggle
         html.find(".toggle-on-click").on("click", (event) => {
             const elmt = $(event.currentTarget).data("toggle");
@@ -385,5 +386,85 @@ export class HelpersL5r5e {
                 }
             }
         });
+
+        // Item detail tooltips
+        const fctPos = (event, popup) => {
+            let left = +event.clientX + 60,
+                top = +event.clientY;
+
+            let maxY = window.innerHeight - popup.outerHeight();
+            if (top > maxY) {
+                top = maxY - 10;
+            }
+
+            let maxX = window.innerWidth - popup.outerWidth();
+            if (left > maxX) {
+                left -= popup.outerWidth() + 100;
+            }
+            return { left: left + "px", top: top + "px", visibility: "visible" };
+        };
+        html.find(".l5r5e-tooltip")
+            .on("mouseenter", async (event) => {
+                $(document.body).find("#l5r5e-tooltip-ct").remove();
+
+                const item = await HelpersL5r5e.getEmbedItemByEvent(event, actor);
+                if (!item) {
+                    return;
+                }
+
+                const type = item.type.replace("_", "-"); // ex: item_pattern
+                const tpl = await renderTemplate(
+                    `${CONFIG.l5r5e.paths.templates}items/${type}/${type}-text.html`,
+                    item
+                );
+                if (!tpl) {
+                    return;
+                }
+
+                const popup = $(document.body).append(
+                    `<div id="l5r5e-tooltip-ct" class="l5r5e-tooltip l5r5e-tooltip-ct">${tpl}</div>`
+                );
+                popup.css(fctPos(event, popup));
+            })
+            .on("mousemove", (event) => {
+                const popup = $(document.body).find("#l5r5e-tooltip-ct");
+                if (popup) {
+                    popup.css(fctPos(event, popup));
+                }
+            })
+            .on("mouseleave", () => {
+                $(document.body).find("#l5r5e-tooltip-ct").remove();
+            }); // tooltips
+    }
+
+    /**
+     * Get a Item from a Actor Sheet
+     * @param {Event} event HTML Event
+     * @param {ActorL5r5e} actor
+     */
+    static async getEmbedItemByEvent(event, actor) {
+        const current = $(event.currentTarget);
+        const itemId = current.data("item-id");
+        const propertyId = current.data("property-id");
+        const itemParentId = current.data("item-parent-id");
+
+        let item;
+        if (propertyId) {
+            item = await HelpersL5r5e.getObjectGameOrPack({ id: propertyId, type: "Item" });
+        } else if (itemParentId) {
+            // Embed Item
+            const parentItem = actor.items.get(itemParentId);
+            if (!parentItem) {
+                return;
+            }
+            item = parentItem.items.get(itemId);
+        } else {
+            // Regular item
+            item = actor.items.get(itemId);
+        }
+        if (!item) {
+            return;
+        }
+        return item;
     }
 }

system/styles/scss/sheets.scss

@@ -878,34 +878,3 @@
         }
     }
 }
-// tooltip
-.l5r5e-tooltip {
-    position: relative;
-    display: inline-block;
-    border-bottom: 1px dotted #963c41;
-    overflow: initial !important;
-    .l5r5e-tooltip-ct,
-    &.l5r5e-tooltip-ct {
-        visibility: hidden;
-        width: 100%;
-        background: #fffae6 url("../assets/imgs/bg-l5r.webp") no-repeat;
-        color: $white;
-        text-align: center;
-        border: 1px solid rgba(0, 0, 0, 0.15);
-        border-radius: 0.25rem;
-        padding: 0.25rem;
-
-        /* Position */
-        position: absolute;
-        z-index: 1;
-        * {
-            color: $white;
-        }
-    }
-    &:hover {
-        .l5r5e-tooltip-ct,
-        &.l5r5e-tooltip-ct {
-            visibility: visible;
-        }
-    }
-}

system/styles/scss/ui.scss

@@ -655,3 +655,31 @@ button {
         }
     }
 }
+
+// global tooltip
+.l5r5e-tooltip {
+    cursor: url("../assets/cursors/pointer.webp"), pointer;
+
+    .l5r5e-tooltip-ct,
+    &.l5r5e-tooltip-ct {
+        visibility: hidden;
+        min-height: 200px;
+        width: 600px;
+        height: auto;
+        max-height: 1000px;
+        //background: #fffae6 url("../assets/imgs/bg-l5r.webp") no-repeat;
+        background-color: #3e3a30;
+        color: $white;
+        font-size: 0.8rem;
+        text-align: left;
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        border-radius: 0.25rem;
+        padding: 0.25rem;
+        display: block;
+        position: absolute;
+        z-index: 9999;
+        * {
+            color: $white;
+        }
+    }
+}

system/templates/actors/character/advancement-others.html

@@ -1,5 +1,5 @@
 <tr class="flexrow row advancement">
-    <td class="name" name="advancement.name"><img src="{{advancement.img}}" title="{{advancement.name}}"> {{advancement.name}}{{#if advancement.data.bond_type}} ({{advancement.data.bond_type}}){{/if}}</td>
+    <td class="name l5r5e-tooltip" data-item-id="{{advancement._id}}" name="advancement.name"><img src="{{advancement.img}}" title="{{advancement.name}}"> {{advancement.name}}{{#if advancement.data.bond_type}} ({{advancement.data.bond_type}}){{/if}}</td>
     {{#if show_curriculum_toggle}}<td class="curriculum" name="curriculum">{{#if advancement.data.in_curriculum}}<i class="fas fa-graduation-cap"></i> {{/if}}</td>{{/if}}
     <td class="xp" name="advancement.xp">{{#if advancement.data.xp_used_total}}{{advancement.data.xp_used_total}}{{else}}{{advancement.data.xp_used}}{{/if}}</td>
     <td class="rank" name="advancement.rank">{{advancement.data.rank}}</td>

system/templates/actors/character/advancement-school.html

@@ -1,5 +1,5 @@
 <tr data-group="advancements" data-tab="advancement_rank_{{rank}}" class="flexrow row advancement tab">
-    <td class="name" name="advancement.name"><img src="{{advancement.img}}" title="{{advancement.name}}"> {{advancement.name}}</td>
+    <td class="name l5r5e-tooltip" data-item-id="{{advancement._id}}" name="advancement.name"><img src="{{advancement.img}}" title="{{advancement.name}}"> {{advancement.name}}</td>
     <td class="curriculum" name="curriculum">{{#if advancement.data.in_curriculum}}<i class="fas fa-graduation-cap"></i> {{/if}}</td>
     <td class="xp" name="advancement.xp">{{advancement.data.xp_used}}</td>
     <td class="rank" name="advancement.rank">{{advancement.data.rank}}</td>

system/templates/items/advancement/advancement-entry.html

@@ -1,13 +1,10 @@
-<li class="item advancement flexcol toggle-on-click" data-toggle="item-description-{{advancement._id}}" data-item-id="{{advancement._id}}">
+<li class="item advancement flexcol" data-item-id="{{advancement._id}}">
     <ul class="item-header advancement-controls">
         <li class="item-img"><img src="{{advancement.img}}" title="{{advancement.name}}" width="32px" height="32px"/></li>
-        <li class="item-name">{{advancement.name}}</li>
+        <li class="item-name l5r5e-tooltip" data-item-id="{{advancement._id}}">{{advancement.name}}</li>
         {{#if editable}}
             <li data-item-id="{{advancement._id}}" class="item-control item-edit" title="{{localize 'l5r5e.global.edit'}}"><i class="fas fa-edit"></i></li>
             <li data-item-id="{{advancement._id}}" class="item-control item-delete" title="{{localize 'Delete'}}"><i class="fas fa-trash"></i></li>
         {{/if}}
     </ul>
-    {{#if advancement.data.data.description}}
-    <div class="item-description item-description-{{advancement._id}}">{{{advancement.data.data.description}}}</div>
-    {{/if}}
 </li>

system/templates/items/advancement/advancement-text.html

@@ -0,0 +1,27 @@
+<div class="{{cssClass}}" data-actor-id="{{actor.data._id}}" data-item-id="{{data.data._id}}">
+    <header class="card-header flexrow">
+        <img src="{{data.img}}" title="{{data.name}}" width="36" height="36"/>
+        <h3 class="item-name">{{data.name}}</h3>
+    </header>
+    <section class="sheet-body">
+        {{#ifCond data.data.advancement_type '==' 'ring' }}
+            {{localize 'l5r5e.rings.title'}} : {{localizeRing data.data.ring}}
+        {{else}}
+            {{localize 'l5r5e.skill'}} : {{localizeSkillId data.data.skill}}
+        {{/ifCond}}
+        <br>
+        {{localize 'l5r5e.advancements.curriculum'}} : {{#if data.data.in_curriculum}}{{localize 'Yes'}}{{else}}{{localize 'No'}}{{/if}}
+        <br>
+        {{localize 'l5r5e.advancements.spent'}} : {{data.data.xp_used}}
+        <br>
+        {{localize 'l5r5e.rank'}} : {{data.data.rank}}
+        <br>
+        {{localize 'l5r5e.bought_at_rank'}} : {{data.data.bought_at_rank}}
+
+        {{!--item-infos--}}
+        <br>
+        {{localize 'l5r5e.description'}} : {{{data.data.description}}}
+        <br>
+        {{localize 'l5r5e.book_reference'}} : {{data.data.book_reference}}
+    </section>
+</div>

system/templates/items/armor/armor-entry.html

@@ -1,7 +1,7 @@
-<li class="item armor flexcol toggle-on-click" data-toggle="item-description-{{armor.id}}" data-item-id="{{armor.id}}">
+<li class="item armor flexcol" data-item-id="{{armor.id}}">
     <ul class="item-header item-control">
         <li class="item-img"><img src="{{armor.img}}" title="{{armor.name}}" width="32px" height="32px"/></li>
-        <li class="item-name">{{armor.name}}</li>
+        <li class="item-name l5r5e-tooltip" data-item-id="{{armor.id}}">{{armor.name}}</li>
         <li class="icon-stat-container">
             <i class="fas fa-tint" title="{{localize 'l5r5e.armors.type'}} {{localize 'l5r5e.armors.physical'}}"> {{armor.data.data.armor.physical}}</i>
             <i class="fas fa-bolt" title="{{localize 'l5r5e.armors.type'}} {{localize 'l5r5e.armors.supernatural'}}"> {{armor.data.data.armor.supernatural}}</i>
@@ -13,10 +13,7 @@
     </ul>
     <ul class="item-properties">
         {{#each armor.data.data.properties as |property id|}}
-            <li>{{{ property.name }}}</li>
+            <li class="l5r5e-tooltip" data-property-id="{{property.id}}">{{{property.name}}}</li>
         {{/each}}
     </ul>
-    {{#if armor.data.data.description}}
-    <div class="item-description item-description-{{armor.id}}">{{{ armor.data.data.description }}}</div>
-    {{/if}}
 </li>

system/templates/items/armor/armor-text.html

@@ -0,0 +1,37 @@
+<div class="{{cssClass}}" data-actor-id="{{actor.data._id}}" data-item-id="{{data.data._id}}">
+    <header class="card-header flexrow">
+        <img src="{{data.img}}" title="{{data.name}}" width="36" height="36"/>
+        <h3 class="item-name">{{data.name}}</h3>
+    </header>
+    <section class="sheet-body">
+        {{localize 'l5r5e.weapons.sheathed'}} : {{#if data.data.equipped}}{{localize 'Yes'}}{{else}}{{localize 'No'}}{{/if}}
+        <br>
+        {{localize 'l5r5e.weapons.readied'}} : {{#if data.data.readied}}{{localize 'Yes'}}{{else}}{{localize 'No'}}{{/if}}
+
+        {{!--item-value--}}
+        <br>
+        {{localize 'l5r5e.quantity'}} : {{data.data.quantity}}
+        <br>
+        {{localize 'l5r5e.weight'}} :{{data.data.weight}}
+        <br>
+        {{localize 'l5r5e.rarity'}} : {{data.data.rarity}}
+        <br>
+        {{localize 'l5r5e.value'}} : {{data.data.zeni}}
+
+        <br>
+        {{localize 'l5r5e.armors.physical'}} : {{data.data.armor.physical}}
+        <br>
+        {{localize 'l5r5e.armors.supernatural'}} : {{data.data.armor.supernatural}}
+
+        {{!--properties--}}
+        <br>
+        {{localize 'l5r5e.properties'}} :
+        {{#each data.data.properties as |property idx|}}{{#ifCond idx '>' 0}}, {{/ifCond}}{{property.name}}{{/each}}
+
+        {{!--item-infos--}}
+        <br>
+        {{localize 'l5r5e.description'}} : {{{data.data.description}}}
+        <br>
+        {{localize 'l5r5e.book_reference'}} : {{data.data.book_reference}}
+    </section>
+</div>

system/templates/items/bond/bond-entry.html

@@ -1,7 +1,7 @@
-<li class="item bond flexcol toggle-on-click" data-toggle="item-description-{{bond.id}}" data-item-id="{{bond.id}}">
+<li class="item bond flexcol" data-item-id="{{bond.id}}">
     <ul class="item-header bond-controls">
         <li class="item-img"><img src="{{bond.img}}" title="{{bond.name}}" width="32px" height="32px"/></li>
-        <li class="item-name">{{bond.name}}</li>
+        <li class="item-name l5r5e-tooltip" data-item-id="{{bond.id}}">{{bond.name}}</li>
         {{#if editable}}
             <li data-item-id="{{bond.id}}" class="item-control item-edit" title="{{localize 'l5r5e.global.edit'}}"><i class="fas fa-edit"></i></li>
             <li data-item-id="{{bond.id}}" class="item-control item-delete" title="{{localize 'Delete'}}"><i class="fas fa-trash"></i></li>
@@ -12,7 +12,4 @@
             <li>{{bond.data.data.bond_type}} {{bond.data.data.rank}}</li>
         </ul>
     {{/if}}
-    {{#if bond.data.data.description}}
-    <div class="item-description item-description-{{bond.id}}">{{{bond.data.data.description}}}</div>
-    {{/if}}
 </li>

system/templates/items/bond/bond-text.html

@@ -0,0 +1,28 @@
+<div class="{{cssClass}}" data-actor-id="{{actor.data._id}}" data-item-id="{{data.data._id}}">
+    <header class="card-header flexrow">
+        <img src="{{data.img}}" title="{{data.name}}" width="36" height="36"/>
+        <h3 class="item-name">{{data.name}}</h3>
+    </header>
+    <section class="sheet-body">
+        {{localize 'l5r5e.types'}} : {{data.data.bond_type}}
+        <br>
+        {{localize 'l5r5e.advancements.cost'}} : {{data.data.xp_cost}}
+        <br>
+        {{localize 'l5r5e.advancements.spent'}} : {{data.data.xp_used}}
+        <br>
+        {{localize 'l5r5e.rank'}} : {{data.data.rank}}
+        <br>
+        {{localize 'l5r5e.bought_at_rank'}} : {{data.data.bought_at_rank}}
+
+        {{!--properties--}}
+        <br>
+        {{localize 'l5r5e.properties'}} :
+        {{#each data.data.properties as |property idx|}}{{#ifCond idx '>' 0}}, {{/ifCond}}{{property.name}}{{/each}}
+
+        {{!--item-infos--}}
+        <br>
+        {{localize 'l5r5e.description'}} : {{{data.data.description}}}
+        <br>
+        {{localize 'l5r5e.book_reference'}} : {{data.data.book_reference}}
+    </section>
+</div>

system/templates/items/item-pattern/item-pattern-entry.html

@@ -1,13 +1,10 @@
-<li class="item item-pattern flexcol toggle-on-click" data-toggle="item-description-{{pattern.id}}" data-item-id="{{pattern.id}}">
+<li class="item item-pattern flexcol" data-item-id="{{pattern.id}}">
     <ul class="item-header pattern-controls">
         <li class="item-img"><img src="{{pattern.img}}" title="{{pattern.name}}" width="24px" height="24px"/></li>
-        <li class="item-name">{{pattern.name}}</li>
+        <li class="item-name l5r5e-tooltip" data-item-id="{{pattern.id}}">{{pattern.name}}</li>
         {{#if editable}}
             <li data-item-id="{{pattern.id}}" class="item-control item-edit" title="{{localize 'l5r5e.global.edit'}}"><i class="fas fa-edit"></i></li>
             <li data-item-id="{{pattern.id}}" class="item-control item-delete" title="{{localize 'Delete'}}"><i class="fas fa-trash"></i></li>
         {{/if}}
     </ul>
-    {{#if pattern.data.data.description}}
-    <div class="item-description item-description-{{pattern.id}}">{{{pattern.data.data.description}}}</div>
-    {{/if}}
 </li>

system/templates/items/item-pattern/item-pattern-text.html

@@ -0,0 +1,29 @@
+<div class="{{cssClass}}" data-actor-id="{{actor.data._id}}" data-item-id="{{data.data._id}}">
+    <header class="card-header flexrow">
+        <img src="{{data.img}}" title="{{data.name}}" width="36" height="36"/>
+        <h3 class="item-name">{{data.name}}</h3>
+    </header>
+    <section class="sheet-body">
+        {{localize 'l5r5e.advancements.rarity_modifier'}} : {{data.data.rarity_modifier}}
+        <br>
+        {{localize 'l5r5e.advancements.cost'}} : {{data.data.xp_cost}}
+        <br>
+        {{localize 'l5r5e.advancements.spent'}} : {{data.data.xp_used}}
+        <br>
+        {{localize 'l5r5e.rank'}} : {{data.data.rank}}
+        <br>
+        {{localize 'l5r5e.bought_at_rank'}} : {{data.data.bought_at_rank}}
+
+        {{!--Linked property--}}
+        {{!--
+        <br>
+        {{localize 'l5r5e.linked_property'}} : {{{data.data.linkedProperty.name}}} linked_property_id
+        --}}
+
+        {{!--item-infos--}}
+        <br>
+        {{localize 'l5r5e.description'}} : {{{data.data.description}}}
+        <br>
+        {{localize 'l5r5e.book_reference'}} : {{data.data.book_reference}}
+    </section>
+</div>

system/templates/items/item/item-entry.html

@@ -1,7 +1,7 @@
-<li class="item flexcol toggle-on-click" data-toggle="item-description-{{item._id}}" data-item-id="{{item._id}}">
+<li class="item flexcol" data-item-id="{{item._id}}">
     <ul class="item-header item-control">
         <li class="item-img"><img src="{{item.img}}" title="{{item.name}}" width="32px" height="32px"/></li>
-        <li class="item-name">{{ item.name }} <sub>x{{item.data.quantity}}</sub></li>
+        <li class="item-name l5r5e-tooltip" data-item-id="{{item._id}}">{{item.name}} <sub>x{{item.data.quantity}}</sub></li>
         {{#if editable}}
             <li data-item-id="{{item._id}}" data-type="equipped" class="item-equip equip-readied-control" title="{{localize 'l5r5e.armors.equipped'}}"><i class="fas {{#if item.data.equipped}}fa-tshirt{{else}}fa-weight-hanging{{/if}}"></i></li>
             <li data-item-id="{{item._id}}" class="item-edit" title="{{localize 'l5r5e.global.edit'}}"><i class="fas fa-edit"></i></li>
@@ -9,11 +9,8 @@
         {{/if}}
     </ul>
     <ul class="item-properties">
-        {{#each item.data.properties as |property id|}}
+        {{#each item.data.properties as |property idx|}}
-            <li>{{{property.name}}}</li>
+            <li class="l5r5e-tooltip" data-property-id="{{property.id}}">{{{property.name}}}</li>
         {{/each}}
     </ul>
-    {{#if item.data.description}}
-        <div class="item-description item-description-{{item._id}}">{{{item.data.description}}}</div>
-    {{/if}}
 </li>

system/templates/items/item/item-text.html

@@ -0,0 +1,32 @@
+<div class="{{cssClass}}" data-actor-id="{{actor.data._id}}" data-item-id="{{data.data._id}}">
+    <header class="card-header flexrow">
+        <img src="{{data.img}}" title="{{data.name}}" width="36" height="36"/>
+        <h3 class="item-name">{{data.name}}</h3>
+    </header>
+    <section class="sheet-body">
+        {{localize 'l5r5e.weapons.sheathed'}} : {{#if data.data.equipped}}{{localize 'Yes'}}{{else}}{{localize 'No'}}{{/if}}
+        <br>
+        {{localize 'l5r5e.weapons.readied'}} : {{#if data.data.readied}}{{localize 'Yes'}}{{else}}{{localize 'No'}}{{/if}}
+
+        {{!--item-value--}}
+        <br>
+        {{localize 'l5r5e.quantity'}} : {{data.data.quantity}}
+        <br>
+        {{localize 'l5r5e.weight'}} :{{data.data.weight}}
+        <br>
+        {{localize 'l5r5e.rarity'}} : {{data.data.rarity}}
+        <br>
+        {{localize 'l5r5e.value'}} : {{data.data.zeni}}
+
+        {{!--properties--}}
+        <br>
+        {{localize 'l5r5e.properties'}} :
+        {{#each data.data.properties as |property idx|}}{{#ifCond idx '>' 0}}, {{/ifCond}}{{property.name}}{{/each}}
+
+        {{!--item-infos--}}
+        <br>
+        {{localize 'l5r5e.description'}} : {{{data.data.description}}}
+        <br>
+        {{localize 'l5r5e.book_reference'}} : {{data.data.book_reference}}
+    </section>
+</div>

system/templates/items/peculiarity/peculiarity-entry.html

@@ -1,7 +1,7 @@
-<li class="item peculiarity flexcol toggle-on-click" data-toggle="item-description-{{peculiarity.id}}" data-item-id="{{peculiarity.id}}">
+<li class="item peculiarity flexcol" data-item-id="{{peculiarity.id}}">
     <ul class="item-header peculiarity-controls">
         <li class="item-img"><img src="{{peculiarity.img}}" title="{{peculiarity.name}}" width="32px" height="32px"/></li>
-        <li class="item-name">{{peculiarity.name}}</li>
+        <li class="item-name l5r5e-tooltip" data-item-id="{{peculiarity.id}}">{{peculiarity.name}}</li>
         {{#if editable}}
             <li data-item-id="{{peculiarity.id}}" class="item-control item-edit" title="{{localize 'l5r5e.global.edit'}}"><i class="fas fa-edit"></i></li>
             <li data-item-id="{{peculiarity.id}}" class="item-control item-delete" title="{{localize 'Delete'}}"><i class="fas fa-trash"></i></li>
@@ -12,7 +12,4 @@
         <li>{{peculiarity.data.data.types}}</li>
     </ul>
     {{/if}}
-    {{#if peculiarity.data.data.description}}
-        <div class="item-description item-description-{{peculiarity.id}}">{{{peculiarity.data.data.description}}}</div>
-    {{/if}}
 </li>

system/templates/items/peculiarity/peculiarity-text.html

@@ -0,0 +1,27 @@
+<div class="{{cssClass}}" data-actor-id="{{actor.data._id}}" data-item-id="{{data.data._id}}">
+    <header class="card-header flexrow">
+        <img src="{{data.img}}" title="{{data.name}}" width="36" height="36"/>
+        <h3 class="item-name">{{data.name}}</h3>
+    </header>
+    <section class="sheet-body">
+        {{localize 'l5r5e.rings.title'}} : {{localizeRing data.data.ring}}
+        <br>
+        {{localize 'l5r5e.types'}} : {{localize (localize 'l5r5e.peculiarities.types.{type}' type=data.data.peculiarity_type)}}
+        <br>
+        {{localize 'l5r5e.advancements.curriculum'}} : {{#if data.data.in_curriculum}}{{localize 'Yes'}}{{else}}{{localize 'No'}}{{/if}}
+        <br>
+        {{localize 'l5r5e.advancements.spent'}} : {{data.data.xp_used}}
+        <br>
+        {{localize 'l5r5e.rank'}} : {{data.data.rank}}
+        <br>
+        {{localize 'l5r5e.bought_at_rank'}} : {{data.data.bought_at_rank}}
+        <br>
+        {{localize 'l5r5e.types'}} : {{data.data.types}}
+
+        {{!--item-infos--}}
+        <br>
+        {{localize 'l5r5e.description'}} : {{{data.data.description}}}
+        <br>
+        {{localize 'l5r5e.book_reference'}} : {{data.data.book_reference}}
+    </section>
+</div>

system/templates/items/property/property-entry.html

@@ -1,12 +1,9 @@
-<li class="item property flexcol toggle-on-click" data-toggle="item-description-{{property.id}}" data-property-id="{{property.id}}">
+<li class="item property flexcol" data-property-id="{{property.id}}">
     <ul class="item-header property-control">
         <li class="item-img"><img src="{{property.img}}" title="{{property.name}}" width="32px" height="32px"/></li>
-        <li class="item-name">{{property.name}}</li>
+        <li class="item-name l5r5e-tooltip" data-property-id="{{property.id}}">{{property.name}}</li>
         {{#if editable}}
             <li class="property-delete" title="{{localize 'Delete'}}"><i class="fas fa-trash"></i></li>
         {{/if}}
     </ul>
-    {{#if property.data.data.description}}
-        <div class="item-description item-description-{{property.id}}">{{{property.data.data.description}}}</div>
-    {{/if}}
 </li>

system/templates/items/property/property-text.html

@@ -0,0 +1,12 @@
+<div class="{{cssClass}}" data-actor-id="{{actor.data._id}}" data-item-id="{{data.data._id}}">
+    <header class="card-header flexrow">
+        <img src="{{data.img}}" title="{{data.name}}" width="36" height="36"/>
+        <h3 class="item-name">{{data.name}}</h3>
+    </header>
+    <section class="sheet-body">
+        {{!--item-infos--}}
+        {{localize 'l5r5e.description'}} : {{{data.data.description}}}
+        <br>
+        {{localize 'l5r5e.book_reference'}} : {{data.data.book_reference}}
+    </section>
+</div>

system/templates/items/signature-scroll/signature-scroll-entry.html

@@ -1,13 +1,10 @@
-<li class="item signature-scroll flexcol toggle-on-click" data-toggle="item-description-{{scroll.id}}" data-item-id="{{scroll.id}}">
+<li class="item signature-scroll flexcol" data-item-id="{{scroll.id}}">
     <ul class="item-header signature-scroll-controls">
         <li class="item-img"><img src="{{scroll.img}}" title="{{scroll.name}}" width="24px" height="24px"/></li>
-        <li class="item-name">{{scroll.name}}</li>
+        <li class="item-name l5r5e-tooltip" data-item-id="{{scroll.id}}">{{scroll.name}}</li>
         {{#if editable}}
             <li data-item-id="{{scroll.id}}" class="item-control item-edit" title="{{localize 'l5r5e.global.edit'}}"><i class="fas fa-edit"></i></li>
             <li data-item-id="{{scroll.id}}" class="item-control item-delete" title="{{localize 'Delete'}}"><i class="fas fa-trash"></i></li>
         {{/if}}
     </ul>
-    {{#if scroll.data.data.description}}
-        <div class="item-description item-description-{{scroll.id}}">{{{scroll.data.data.description}}}</div>
-    {{/if}}
 </li>

system/templates/items/signature-scroll/signature-scroll-text.html

@@ -0,0 +1,21 @@
+<div class="{{cssClass}}" data-actor-id="{{actor.data._id}}" data-item-id="{{data.data._id}}">
+    <header class="card-header flexrow">
+        <img src="{{data.img}}" title="{{data.name}}" width="36" height="36"/>
+        <h3 class="item-name">{{data.name}}</h3>
+    </header>
+    <section class="sheet-body">
+        {{localize 'l5r5e.advancements.cost'}} : {{data.data.xp_cost}}
+        <br>
+        {{localize 'l5r5e.advancements.spent'}} : {{data.data.xp_used}}
+        <br>
+        {{localize 'l5r5e.rank'}} : {{data.data.rank}}
+        <br>
+        {{localize 'l5r5e.bought_at_rank'}} : {{data.data.bought_at_rank}}
+
+        {{!--item-infos--}}
+        <br>
+        {{localize 'l5r5e.description'}} : {{{data.data.description}}}
+        <br>
+        {{localize 'l5r5e.book_reference'}} : {{data.data.book_reference}}
+    </section>
+</div>

system/templates/items/technique/technique-entry.html

@@ -1,7 +1,7 @@
-<li class="item technique flexcol toggle-on-click" data-toggle="item-description-{{technique._id}}" data-item-id="{{technique._id}}">
+<li class="item technique flexcol" data-item-id="{{technique._id}}">
     <ul class="item-header technique-controls">
         <li class="item-img"><img src="{{technique.img}}" title="{{technique.name}}" width="32px" height="32px"/></li>
-        <li class="item-name">{{technique.name}}</li>
+        <li class="item-name l5r5e-tooltip" data-item-id="{{technique._id}}" {{#if technique.data.parent_id.item_id}}data-item-parent-id="{{technique.data.parent_id.item_id}}"{{/if}}>{{technique.name}}</li>
         {{#if editable}}
             <li data-item-id="{{technique._id}}" {{#if technique.data.parent_id.item_id}}data-item-parent-id="{{technique.data.parent_id.item_id}}"{{/if}} class="item-control item-edit" title="{{localize 'l5r5e.global.edit'}}"><i class="fas fa-edit"></i></li>
             {{^if technique.data.parent_id.item_id}}
@@ -9,7 +9,4 @@
             {{/if}}
         {{/if}}
     </ul>
-    {{#if technique.data.description}}
-    <div class="item-description item-description-{{technique._id}}">{{{technique.data.description}}}</div>
-    {{/if}}
 </li>

system/templates/items/technique/technique-text.html

@@ -0,0 +1,27 @@
+<div class="{{cssClass}}" data-actor-id="{{actor.data._id}}" data-item-id="{{data.data._id}}">
+    <header class="card-header flexrow">
+        <img src="{{data.img}}" title="{{data.name}}" width="36" height="36"/>
+        <h3 class="item-name">{{data.name}}</h3>
+    </header>
+    <section class="sheet-body">
+        {{localize 'l5r5e.rings.title'}} : {{localizeRing data.data.ring}}
+        <br>
+        {{localize 'l5r5e.types'}} : {{localizeTechnique data.data.technique_type}}
+        <br>
+        {{localize 'l5r5e.advancements.curriculum'}} : {{#if data.data.in_curriculum}}{{localize 'Yes'}}{{else}}{{localize 'No'}}{{/if}}
+        <br>
+        {{localize 'l5r5e.advancements.cost'}} : {{data.data.xp_cost}}
+        <br>
+        {{localize 'l5r5e.advancements.spent'}} : {{data.data.xp_used}}
+        <br>
+        {{localize 'l5r5e.rank'}} : {{data.data.rank}}
+        <br>
+        {{localize 'l5r5e.bought_at_rank'}} : {{data.data.bought_at_rank}}
+
+        {{!--item-infos--}}
+        <br>
+        {{localize 'l5r5e.description'}} : {{{data.data.description}}}
+        <br>
+        {{localize 'l5r5e.book_reference'}} : {{data.data.book_reference}}
+    </section>
+</div>

system/templates/items/title/title-entry.html

@@ -1,13 +1,10 @@
-<li class="item title flexcol toggle-on-click" data-toggle="item-description-{{title._id}}" data-item-id="{{title._id}}">
+<li class="item title flexcol" data-item-id="{{title._id}}">
     <ul class="item-header title-controls">
         <li class="item-img"><img src="{{title.img}}" title="{{title.name}}" width="24px" height="24px"/></li>
-        <li class="item-name"><i class="i_{{title.data.ring}}" title="{{localizeRing title.data.ring}}"></i> {{title.name}}</li>
+        <li class="item-name l5r5e-tooltip" data-item-id="{{title._id}}">{{title.name}}</li>
         {{#if editable}}
             <li data-item-id="{{title._id}}" class="item-control item-edit" title="{{localize 'l5r5e.global.edit'}}"><i class="fas fa-edit"></i></li>
             <li data-item-id="{{title._id}}" class="item-control item-delete" title="{{localize 'Delete'}}"><i class="fas fa-trash"></i></li>
         {{/if}}
     </ul>
-    {{#if title.data.description}}
-    <div class="item-description item-description-{{title._id}}">{{{title.data.description}}}</div>
-    {{/if}}
 </li>

system/templates/items/title/title-text.html

@@ -0,0 +1,30 @@
+<div class="{{cssClass}}" data-actor-id="{{actor.data._id}}" data-item-id="{{data.data._id}}">
+    <header class="card-header flexrow">
+        <img src="{{data.img}}" title="{{data.name}}" width="36" height="36"/>
+        <h3 class="item-name">{{data.name}}</h3>
+    </header>
+    <section class="sheet-body">
+        {{localize 'l5r5e.advancements.cost'}} : {{data.data.xp_cost}}
+        <br>
+        {{localize 'l5r5e.rank'}} : {{data.data.rank}}
+        <br>
+        {{localize 'l5r5e.bought_at_rank'}} : {{data.data.bought_at_rank}}
+        <br>
+        {{localize 'l5r5e.advancements.total_xp_curriculum'}} : {{data.data.xp_used}} / {{data.data.xp_cost}}
+        <br>
+        {{localize 'l5r5e.advancements.total_xp_spent'}} : {{data.data.xp_used_total}}
+
+        {{!--
+        <br>
+        {{#each data.embedItemsList as |advancement|}}
+            {{json advancement}}
+        {{/each}}
+        --}}
+
+        {{!--item-infos--}}
+        <br>
+        {{localize 'l5r5e.description'}} : {{{data.data.description}}}
+        <br>
+        {{localize 'l5r5e.book_reference'}} : {{data.data.book_reference}}
+    </section>
+</div>

system/templates/items/weapon/weapon-entry.html

@@ -1,7 +1,7 @@
-<li class="item weapon flexcol toggle-on-click" data-toggle="item-description-{{weapon.id}}">
+<li class="item weapon flexcol">
     <ul class="item-header item-control">
         <li class="item-img"><img src="{{weapon.img}}" title="{{weapon.name}}" width="32px" height="32px"/></li>
-        <li class="item-name dice-picker" data-weapon-id="{{weapon.id}}">{{weapon.name}}</li>
+        <li class="item-name dice-picker l5r5e-tooltip" data-item-id="{{weapon.id}}" data-weapon-id="{{weapon.id}}">{{weapon.name}}</li>
         <li class="icon-stat-container">
             <i class="fas fa-arrows-alt-h" title="{{localize 'l5r5e.weapons.range'}}"> {{weapon.data.data.range}}</i>
             <i class="fas fa-tint" title="{{localize 'l5r5e.weapons.damage'}}"> {{weapon.data.data.damage}}</i>
@@ -16,11 +16,8 @@
         <li class="equip-readied-control" data-item-id="{{weapon.id}}" data-type="readied">
             <i class="i_readied fa{{^if weapon.data.data.readied}}r{{/if}} fa-check-circle" title="{{#if weapon.data.data.readied}}{{localize 'l5r5e.weapons.readied'}}{{else}}{{localize 'l5r5e.weapons.sheathed'}}{{/if}}"></i>
         </li>
-        {{#each weapon.data.data.properties as |property id|}}
+        {{#each weapon.data.data.properties as |property|}}
-            <li>{{{property.name}}}</li>
+            <li class="l5r5e-tooltip" data-property-id="{{property.id}}">{{{property.name}}}</li>
         {{/each}}
     </ul>
-    {{#if weapon.data.data.description}}
-        <div class="item-description item-description-{{weapon.id}}">{{{weapon.data.data.description}}}</div>
-    {{/if}}
 </li>

system/templates/items/weapon/weapon-sheet.html

@@ -1,29 +1,29 @@
 <form class="{{cssClass}}" autocomplete="off">
     <header class="sheet-header">
-        <img class="profile-img" src="{{document.img}}" data-edit="img" title="{{document.name}}"/>
+        <img class="profile-img" src="{{data.img}}" data-edit="img" title="{{data.name}}"/>
-        <h1 class="charname"><input name="name" type="text" value="{{document.name}}" placeholder="Name"/></h1>
+        <h1 class="charname"><input name="name" type="text" value="{{data.name}}" placeholder="Name"/></h1>
     </header>
     {{!-- Sheet Body --}}
     <section class="sheet-body">
         {{!-- attributes--}}
         <article class="attributes" data-group="primary" data-tab="description">
             <label class="attribute-value checkbox">
-                <input type="checkbox" name="data.equipped" {{checked document.data.data.equipped}} />
+                <input type="checkbox" name="data.equipped" {{checked data.data.equipped}} />
                 {{localize 'l5r5e.weapons.sheathed'}}
             </label>
             <label class="attribute-value checkbox">
-                <input type="checkbox" name="data.readied" {{checked document.data.data.readied}} />
+                <input type="checkbox" name="data.readied" {{checked data.data.readied}} />
                 {{localize 'l5r5e.weapons.readied'}}
             </label>
             {{> 'systems/l5r5e/templates/items/item/item-value.html'}}
             <label class="category">
                 {{localize 'l5r5e.weapons.category'}}
-                <input type="text" name="data.category" value="{{document.data.data.category}}" />
+                <input type="text" name="data.category" value="{{data.data.category}}" />
             </label>
             <label class="skillType">
                 {{localize 'l5r5e.skill'}}
                 <select class="attribute-dtype" name="data.skill">
-                    {{#select document.data.data.skill}}
+                    {{#select data.data.skill}}
                         {{#each data.skills as |id cat|}}
                             <option value="{{id}}">{{localizeSkillId id}}</option>
                         {{/each}}
@@ -34,26 +34,26 @@
                 <legend class="text-block-header">{{localize  'l5r5e.weapons.stats'}}</legend>
                 <label>
                     {{localize 'l5r5e.weapons.range'}}
-                    <input class="select-on-focus" type="text" name="data.range" value="{{document.data.data.range}}" data-dtype="String" placeholder="0"/>
+                    <input class="select-on-focus" type="text" name="data.range" value="{{data.data.range}}" data-dtype="String" placeholder="0"/>
                 </label>
                 <label>
                     {{localize 'l5r5e.weapons.damage'}}
-                    <input class="select-on-focus" type="number" name="data.damage" value="{{document.data.data.damage}}" data-dtype="Number" min="0" placeholder="0"/>
+                    <input class="select-on-focus" type="number" name="data.damage" value="{{data.data.damage}}" data-dtype="Number" min="0" placeholder="0"/>
                 </label>
                 <label>
                     {{localize 'l5r5e.weapons.deadliness'}}
-                    <input class="select-on-focus" type="number" name="data.deadliness" value="{{document.data.data.deadliness}}" data-dtype="Number" min="0" placeholder="0"/>
+                    <input class="select-on-focus" type="number" name="data.deadliness" value="{{data.data.deadliness}}" data-dtype="Number" min="0" placeholder="0"/>
                 </label>
             </fieldset>
             <fieldset class="stats">
                 <legend class="text-block-header">{{localize 'l5r5e.weapons.grips'}}</legend>
                 <label>
                     {{localize 'l5r5e.weapons.1hand'}}
-                    <input class="grip" type="text" name="data.grip_1" value="{{document.data.data.grip_1}}" />
+                    <input class="grip" type="text" name="data.grip_1" value="{{data.data.grip_1}}" />
                 </label>
                 <label>
                     {{localize 'l5r5e.weapons.2hand'}}
-                    <input class="grip" type="text" name="data.grip_2" value="{{document.data.data.grip_2}}" />
+                    <input class="grip" type="text" name="data.grip_2" value="{{data.data.grip_2}}" />
                 </label>
             </fieldset>
         </article>

system/templates/items/weapon/weapon-text.html

@@ -0,0 +1,47 @@
+<div class="{{cssClass}}" data-actor-id="{{actor.data._id}}" data-item-id="{{data.data._id}}">
+    <header class="card-header flexrow">
+        <img src="{{data.img}}" title="{{data.name}}" width="36" height="36"/>
+        <h3 class="item-name">{{data.name}}</h3>
+    </header>
+    <section class="sheet-body">
+        {{localize 'l5r5e.weapons.sheathed'}} : {{#if data.data.equipped}}{{localize 'Yes'}}{{else}}{{localize 'No'}}{{/if}}
+        <br>
+        {{localize 'l5r5e.weapons.readied'}} : {{#if data.data.readied}}{{localize 'Yes'}}{{else}}{{localize 'No'}}{{/if}}
+
+        {{!--item-value--}}
+        <br>
+        {{localize 'l5r5e.quantity'}} : {{data.data.quantity}}
+        <br>
+        {{localize 'l5r5e.weight'}} :{{data.data.weight}}
+        <br>
+        {{localize 'l5r5e.rarity'}} : {{data.data.rarity}}
+        <br>
+        {{localize 'l5r5e.value'}} : {{data.data.zeni}}
+
+        <br>
+        {{localize 'l5r5e.weapons.category'}} : {{data.data.category}}
+        <br>
+        {{localize 'l5r5e.skill'}} : {{localizeSkillId data.data.skill}}
+        <br>
+        {{localize 'l5r5e.weapons.range'}} : {{data.data.range}}
+        <br>
+        {{localize 'l5r5e.weapons.damage'}} :  {{data.data.damage}}
+        <br>
+        {{localize 'l5r5e.weapons.deadliness'}} : {{data.data.deadliness}}
+        <br>
+        {{localize 'l5r5e.weapons.1hand'}} : {{data.data.grip_1}}
+        <br>
+        {{localize 'l5r5e.weapons.2hand'}} : {{data.data.grip_2}}
+
+        {{!--properties--}}
+        <br>
+        {{localize 'l5r5e.properties'}} :
+        {{#each data.data.properties as |property idx|}}{{#ifCond idx '>' 0}}, {{/ifCond}}{{property.name}}{{/each}}
+
+        {{!--item-infos--}}
+        <br>
+        {{localize 'l5r5e.description'}} : {{{data.data.description}}}
+        <br>
+        {{localize 'l5r5e.book_reference'}} : {{data.data.book_reference}}
+    </section>
+</div>