2025-09-12 20:56:25 +02:00
7 changed files with 134 additions and 115 deletions
--- 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
--- 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;
--- 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 */
 }
--- 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;
--- 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}}
--- 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')}}
--- 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>