From bd082248d9b89f74f8410fe5bf02c399c12e1a58 Mon Sep 17 00:00:00 2001
From: Vincent Vandemeulebrouck <vincent.vandeme@gmail.com>
Date: Fri, 5 Sep 2025 00:54:33 +0200
Subject: [PATCH] Correction de tooltips (v13)

Sur les ajustements, les tooltips sont visibles
---
 changelog.md                        |   4 +
 css/foundryvtt-reve-de-dragon.css   |  70 +++++++--------
 less/fonts.less                     |   2 +-
 less/foundryvtt-reve-de-dragon.less | 127 +++++++++++++++-------------
 templates/actor/carac-main.hbs      |  18 ++--
 templates/actor/competence.hbs      |   8 +-
 templates/chat-infojet.hbs          |  20 +++--
 7 files changed, 134 insertions(+), 115 deletions(-)

diff --git a/changelog.md b/changelog.md
index 4dea6baa..ef79d821 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,4 +1,8 @@
 # 13.0
+## 13.0.7 - Sous le signe d'Illysis
+- Fix Foundry V13
+  - les tooltips des ajustements sont correctement visible
+
 ## 13.0.6 - Le bandage d'Illysis
 
 - Les soins sont de nouveau disponibles depuis les tokens
diff --git a/css/foundryvtt-reve-de-dragon.css b/css/foundryvtt-reve-de-dragon.css
index 75abb883..6654d6d7 100644
--- a/css/foundryvtt-reve-de-dragon.css
+++ b/css/foundryvtt-reve-de-dragon.css
@@ -132,8 +132,8 @@ select,
   /*--------------------------------------------------------------------------*/
   /* Control, Tool, hotbar & navigation */
   /* Tooltip container */
-  /* Tooltip text */
   /* Show the tooltip text when you mouse over the tooltip container */
+  /* html Tooltips html*/
   /* Dropdown Content (Hidden by Default) */
   /* Change the background color of the dropdown button when the dropdown content is shown */
   /* Show the dropdown menu on hover */
@@ -420,8 +420,9 @@ select,
 .system-foundryvtt-reve-de-dragon .window-header {
   background: rgba(0, 0, 0, 0.75);
 }
+.system-foundryvtt-reve-de-dragon .application .window-content,
 .system-foundryvtt-reve-de-dragon .window-app.sheet .window-content {
-  margin: 0;
+  margin: 0.2rem;
   padding: 0;
 }
 .system-foundryvtt-reve-de-dragon section.window-content div.dialog-buttons {
@@ -1183,7 +1184,7 @@ select,
   font-weight: bold;
   background-color: lightblue;
 }
-.system-foundryvtt-reve-de-dragon div.placeholder-resolution span.table-proba-reussite {
+.system-foundryvtt-reve-de-dragon span.table-proba-reussite {
   font-size: 0.8rem;
   padding: 5px;
 }
@@ -1360,7 +1361,7 @@ select,
   width: 100%;
   max-width: 90%;
 }
-.system-foundryvtt-reve-de-dragon .window-app.sheet .window-content .tooltip:hover .tooltiptext {
+.system-foundryvtt-reve-de-dragon .window-app.sheet .window-content :is(.tooltip, .tooltip-overflow):hover .tooltiptext {
   top: 2rem;
   left: 2rem;
   margin: 0;
@@ -1804,6 +1805,13 @@ select,
   padding: 1px;
   vertical-align: text-top;
 }
+.system-foundryvtt-reve-de-dragon .actor-img-small {
+  max-width: 1.5rem;
+  max-height: 1.5rem;
+  flex-grow: 0;
+  margin-right: 0.2rem;
+  vertical-align: bottom;
+}
 .system-foundryvtt-reve-de-dragon #sidebar-tabs {
   flex: 0 0 28px;
   box-sizing: border-box;
@@ -2280,11 +2288,26 @@ select,
   position: relative;
   display: inline-block;
 }
+.system-foundryvtt-reve-de-dragon .tooltip-overflow {
+  display: inline-block;
+}
 .system-foundryvtt-reve-de-dragon .tooltip-dotted {
   border-bottom: 1px dotted black;
   /* If you want dots under the hoverable text */
 }
-.system-foundryvtt-reve-de-dragon .tooltip .tooltiptext {
+.system-foundryvtt-reve-de-dragon div.message-content span .tooltip-overflow {
+  overflow: visible;
+  position: absolute;
+}
+.system-foundryvtt-reve-de-dragon div.message-content span .tooltip-overflow span {
+  overflow: visible;
+  position: relative;
+}
+.system-foundryvtt-reve-de-dragon :is(.tooltip, .tooltip-overflow):hover .tooltiptext {
+  visibility: visible;
+  opacity: 1;
+}
+.system-foundryvtt-reve-de-dragon :is(.tooltip, .tooltip-overflow) .tooltiptext {
   text-align: center;
   /* Position the tooltip text */
   position: absolute;
@@ -2294,10 +2317,7 @@ select,
   opacity: 0;
   transition: opacity 0.3s;
 }
-.system-foundryvtt-reve-de-dragon .tooltip .left-competence {
-  transform: translate(-100%, 0%);
-}
-.system-foundryvtt-reve-de-dragon .tooltip .ttt-fatigue {
+.system-foundryvtt-reve-de-dragon :is(.tooltip, .tooltip-overflow) .ttt-fatigue {
   width: 360px;
   background: rgba(30, 25, 20, 0.9);
   border-image: url(../assets/ui/bg_control.webp) 21 repeat;
@@ -2308,29 +2328,24 @@ select,
   font-size: 0.8rem;
   padding: 3px 0;
 }
-.system-foundryvtt-reve-de-dragon .tooltip .ttt-ajustements {
-  width: 150px;
+.system-foundryvtt-reve-de-dragon :is(.tooltip, .tooltip-overflow) .ttt-ajustements {
+  width: 10rem;
   background: var(--background-tooltip);
   border-radius: 6px;
   font-size: 0.9rem;
   padding: 3px 0;
 }
-.system-foundryvtt-reve-de-dragon .tooltip .ttt-titre {
-  text-align: justify;
-  width: 100%;
-  top: 30px;
-  background: var(--background-tooltip);
-  border-radius: 6px;
-  font-size: 0.9rem;
-  padding: 3px;
+.system-foundryvtt-reve-de-dragon :is(.tooltip, .tooltip-overflow) .ttt-ajustements div:nth-child(odd) {
+  background: var(--background-tooltip-alt);
 }
 .system-foundryvtt-reve-de-dragon aside#tooltip {
+  max-width: 15rem;
   background: var(--background-tooltip);
-  /*color: var(--color-text-dark-primary);*/
   color: rgba(100, 100, 50, 0.85);
-  font-size: 1rem;
+  font-size: 0.9rem;
   border-radius: 0.2rem;
-  padding: 0.4rem;
+  padding: 0.3rem;
+  font-family: "CaslonAntique";
 }
 .system-foundryvtt-reve-de-dragon aside#tooltip span.reference {
   color: var(--color-tooltip);
@@ -2339,17 +2354,6 @@ select,
 .system-foundryvtt-reve-de-dragon aside#tooltip .toolclip p.faint {
   color: var(--color-tooltip-faint);
 }
-.system-foundryvtt-reve-de-dragon .tooltip :is(.ttt-xp,.ttt-levelup) {
-  width: 250px;
-  background: var(--background-tooltip) !important;
-  border-radius: 6px;
-  font-size: 0.9rem;
-  padding: 3px 0;
-}
-.system-foundryvtt-reve-de-dragon .tooltip:hover .tooltiptext {
-  visibility: visible;
-  opacity: 1;
-}
 .system-foundryvtt-reve-de-dragon .chat-card-button,
 .system-foundryvtt-reve-de-dragon .chat-card-button-pushed {
   border-radius: 0.2rem;
diff --git a/less/fonts.less b/less/fonts.less
index f02a31e5..0fc3f995 100644
--- a/less/fonts.less
+++ b/less/fonts.less
@@ -80,5 +80,5 @@
 .sheet header.sheet-header .header-compteurs,
 .sheet header.sheet-header .flex-group-center.flex-fatigue,
 select,  .item-checkbox, #sidebar, #players, #navigation #nav-toggle {
-    font-family: "CaslonAntique"; /* For sheet parts; For nav and title */
+  font-family: "CaslonAntique"; /* For sheet parts; For nav and title */
 }
diff --git a/less/foundryvtt-reve-de-dragon.less b/less/foundryvtt-reve-de-dragon.less
index b86792b4..c52ab6c2 100644
--- a/less/foundryvtt-reve-de-dragon.less
+++ b/less/foundryvtt-reve-de-dragon.less
@@ -15,8 +15,9 @@
     background: rgba(0,0,0,0.75);
   }
 
+  .application .window-content,
   .window-app.sheet .window-content {
-    margin: 0;
+    margin: 0.2rem;
     padding: 0;
   }
 
@@ -217,7 +218,6 @@
     padding: 0;
   }
 
-
   .grid-competence-archetype {
     display: grid;
     grid-column: span 3 / span 3;
@@ -641,6 +641,7 @@
     font-size: 1rem;
     letter-spacing: 1px;
   }
+
   .app.sheet div.form-group {
     clear: both;
     display: flex;
@@ -808,6 +809,7 @@
     font-size: 0.8rem;
     text-align: right;
   }
+  
   .placeholder-ajustements {
     flex-direction: column;
   }
@@ -820,7 +822,7 @@
     background-color: lightblue;
   }
 
-  div.placeholder-resolution span.table-proba-reussite{
+  span.table-proba-reussite{
     font-size: 0.8rem;
     padding: 5px;
   }
@@ -1017,7 +1019,7 @@
     max-width: 90%;
   }
 
-  .window-app.sheet .window-content .tooltip:hover .tooltiptext {
+  .window-app.sheet .window-content :is(.tooltip, .tooltip-overflow):hover .tooltiptext {
     top: 2rem;
     left: 2rem;
     margin: 0;
@@ -1504,6 +1506,14 @@
     vertical-align: text-top;
   }
 
+  .actor-img-small {
+    max-width: 1.5rem;
+    max-height: 1.5rem;
+    flex-grow: 0;
+    margin-right: 0.2rem;
+    vertical-align: bottom;
+  }
+
   #sidebar-tabs {
     flex: 0 0 28px;
     box-sizing: border-box;
@@ -1853,66 +1863,78 @@
     position: relative;
     display: inline-block;
   }
-
+  .tooltip-overflow {
+    display: inline-block;
+  }
+  
   .tooltip-dotted {
     border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
   }
 
-  /* Tooltip text */
-  .tooltip .tooltiptext {
-    text-align: center;
-    /* Position the tooltip text */
+  div.message-content span .tooltip-overflow {
+    overflow: visible;
     position: absolute;
-    z-index: 1;
-    /* Fade in tooltip */
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity 0.3s;
+    span {
+      overflow: visible;
+      position: relative;
+    }
   }
 
-  .tooltip .left-competence {
-    transform: translate(-100%, 0%);
+  /* Show the tooltip text when you mouse over the tooltip container */
+  :is(.tooltip, .tooltip-overflow):hover {
+    .tooltiptext {
+      visibility: visible;
+      opacity: 1;
+    }
   }
+  /* html Tooltips html*/
+  :is(.tooltip, .tooltip-overflow){
+  
+    .tooltiptext {
+      text-align: center;
+      /* Position the tooltip text */
+      position: absolute;
+      z-index: 1;
+      /* Fade in tooltip */
+      visibility: hidden;
+      opacity: 0;
+      transition: opacity 0.3s;
+    }
 
-  .tooltip .ttt-fatigue{
-    width: 360px;
+    .ttt-fatigue {
+      width: 360px;
 
-    background: rgba(30, 25, 20, 0.9);
-    border-image: url(../assets/ui/bg_control.webp) 21 repeat;
-    border-image-slice: 6 6 6 6 fill;
-    border-image-width: 6px 6px 6px 6px;
-    border-image-outset: 0px 0px 0px 0px;
-    border-radius: 0px;
+      background: rgba(30, 25, 20, 0.9);
+      border-image: url(../assets/ui/bg_control.webp) 21 repeat;
+      border-image-slice: 6 6 6 6 fill;
+      border-image-width: 6px 6px 6px 6px;
+      border-image-outset: 0px 0px 0px 0px;
+      border-radius: 0px;
 
-    font-size: 0.8rem;
-    padding: 3px 0;
-  }
+      font-size: 0.8rem;
+      padding: 3px 0;
+    }
 
-  .tooltip .ttt-ajustements {
-    width: 150px;
-    background: var(--background-tooltip);
-    border-radius: 6px;
-    font-size: 0.9rem;
-    padding: 3px 0;
-  }
-
-  .tooltip .ttt-titre {
-    text-align: justify;
-    width: 100%;
-    top: 30px;
-    background: var(--background-tooltip);
-    border-radius: 6px;
-    font-size: 0.9rem;
-    padding: 3px;
+    .ttt-ajustements {
+      width: 10rem;
+      background: var(--background-tooltip);
+      border-radius: 6px;
+      font-size: 0.9rem;
+      padding: 3px 0;
+      div:nth-child(odd) {
+        background: var(--background-tooltip-alt);
+      }
+    }
   }
 
   aside#tooltip {
+    max-width: 15rem;
     background: var(--background-tooltip);
-    /*color: var(--color-text-dark-primary);*/
     color: rgba(100, 100, 50, 0.85);
-    font-size: 1rem;
+    font-size: 0.9rem;
     border-radius: 0.2rem;
-    padding: 0.4rem;
+    padding: 0.3rem;
+    font-family: "CaslonAntique";
   }
 
   aside#tooltip span.reference {
@@ -1924,19 +1946,6 @@
     color: var(--color-tooltip-faint);
   }
 
-  .tooltip :is(.ttt-xp,.ttt-levelup) {
-    width: 250px;
-    background: var(--background-tooltip) !important;
-    border-radius: 6px;
-    font-size: 0.9rem;
-    padding: 3px 0;
-  }
-
-  /* Show the tooltip text when you mouse over the tooltip container */
-  .tooltip:hover .tooltiptext {
-    visibility: visible;
-    opacity: 1;
-  }
 
   .chat-card-button, .chat-card-button-pushed {
     border-radius: 0.2rem;
diff --git a/templates/actor/carac-main.hbs b/templates/actor/carac-main.hbs
index ec84ed66..5b26ef21 100644
--- a/templates/actor/carac-main.hbs
+++ b/templates/actor/carac-main.hbs
@@ -13,22 +13,22 @@
       <label class="carac-xp"/>
     {{else}}
       {{#if carac.isLevelUp}}
-        <span class="carac-label tooltip" name="system.carac.{{key}}.label">
-          <span class="tooltiptext ttt-levelup">
-            Vous pouvez dépenser {{carac.xpNext}} points d'Experience pour augmenter de 1 votre caractéristique {{carac.label}}
-          </span>
+        <span class="carac-label" name="system.carac.{{key}}.label">
           <a name={{key}}>{{carac.label}}</a>
-          <a class="carac-xp-augmenter" name="augmenter.{{key}}" data-tooltip="Augmenter la caractéristique avec l'expérience">
+          <a class="carac-xp-augmenter" name="augmenter.{{key}}" 
+            data-tooltip="Vous pouvez dépenser {{carac.xpNext}} points d'Experience pour augmenter votre caractéristique {{carac.label}}">
             <i class="fas fa-arrow-alt-circle-up"></i>
           </a>
         </span>
       {{else}}
-        <span class="carac-label tooltip" name="system.carac.{{key}}.label"><a class="roll-carac" data-carac-name={{key}}>{{carac.label}}</a></span>
+        <span class="carac-label" name="system.carac.{{key}}.label"><a class="roll-carac" data-carac-name={{key}}>{{carac.label}}</a></span>
       {{/if}}
       <input class="carac-value" type="number" name="system.carac.{{key}}.value" value="{{carac.value}}" data-dtype="number" {{#unless @root.options.vueDetaillee}}disabled{{/unless}} />
-      <span class="carac-xp tooltip">
-        <input class="carac-xp" type="number" name="system.carac.{{key}}.xp" value="{{carac.xp}}" data-dtype="number" {{#unless @root.options.vueDetaillee}}disabled{{/unless}} />
-        <span class="tooltiptext ttt-xp">Vous devez acquérir {{carac.xpNext}} points d'Experience pour augmenter de 1 votre {{carac.label}}</span>      
+      <span class="carac-xp">
+        <input class="carac-xp" type="number" name="system.carac.{{key}}.xp" value="{{carac.xp}}" data-dtype="number" 
+          data-tooltip="Vous devez acquérir {{carac.xpNext}} points d'Experience pour augmenter votre {{carac.label}}"
+          {{#unless @root.options.vueDetaillee}}disabled{{/unless}} 
+        />
       </span>
       {{/if}}
     {{/if}}
diff --git a/templates/actor/competence.hbs b/templates/actor/competence.hbs
index a5ac3af7..dff9765a 100644
--- a/templates/actor/competence.hbs
+++ b/templates/actor/competence.hbs
@@ -16,13 +16,13 @@
           {{#if (or (not @root.options.vueDetaillee) @root.options.vueArchetype)}}disabled{{/if}} />
 
     {{#if @root.options.vueDetaillee}}
-    <span class="competence-xp {{#unless system.isLevelUp}}tooltip{{/unless}}">
+    <span class="competence-xp">
       <input class="competence-xp " type="text" compname="{{name}}" name="comp-xp-{{name}}"
           value="{{numberFormat system.xp decimals=0 sign=false}}" data-dtype="number"
+          {{#unless system.isLevelUp}}
+          data-tooltip="Vous devez acquérir {{system.xpNext}} points d'Experience pour augmenter de 1 votre compétence {{name}}"
+          {{/unless}}
           {{#if (or (not @root.options.vueDetaillee) @root.options.vueArchetype)}}disabled{{/if}} />
-      {{#unless system.isLevelUp}}
-      <span class="tooltiptext left-competence ttt-xp">Vous devez acquérir {{system.xpNext}} points d'Experience pour augmenter de 1 votre compétence {{name}}</span>
-      {{/unless}}
     </span>
     {{/if}}
     {{#if (eq system.categorie 'draconic')}}
diff --git a/templates/chat-infojet.hbs b/templates/chat-infojet.hbs
index 44caa6dd..9f0dc31a 100644
--- a/templates/chat-infojet.hbs
+++ b/templates/chat-infojet.hbs
@@ -1,7 +1,15 @@
 <div>
-  <span {{#if ajustements}}class="tooltip tooltip-dotted" {{/if}}>
-    {{rolled.caracValue}} à {{plusMoins rolled.finalLevel}}
-    {{#if ajustements}}
+  <span {{#if ajustements}}class="tooltip-overflow tooltip-dotted" {{/if}}>
+    <span>
+      <span>{{rolled.caracValue}} à {{plusMoins rolled.finalLevel}}</span>
+      {{#if ajustements}}
+      {{/if}}
+      {{#if rolled.factorHtml}}<span class="rdd-diviseur">&times;{{{rolled.factorHtml}}}</span>{{/if}}
+      <span>= {{rolled.score}}%</span>
+      {{#if rolled.factorHtml}}
+      <span class="rdd-diviseur">&times;{{{rolled.factorHtml}}}</span>
+      {{/if}}
+    </span>
     <div class="tooltiptext ttt-ajustements">
       {{#each ajustements as |item key|}}
       {{#if item.used}}
@@ -15,13 +23,7 @@
       {{/if}}
       {{/each}}
     </div>
-    {{/if}}
-    {{#if rolled.factorHtml}}<span class="rdd-diviseur">&times;{{{rolled.factorHtml}}}</span>{{/if}}
   </span>
-  <span>= {{rolled.score}}%</span>
-  {{#if rolled.factorHtml}}
-  <span class="rdd-diviseur">&times;{{{rolled.factorHtml}}}</span>
-  {{/if}}
 </div>
 <div>
   <span>{{rolled.roll}} : </span><span class="rdd-roll-{{rolled.code}} strong-text">{{rolled.quality}}</span>