feat: refactor popups with shared positioning and CSS tooltips

- Add usePopupPosition composable for smart popup positioning
  (bottom-right → bottom-left → top-right → top-left fallback)
- Refactor ElementPopup with complete controls matching mockup
- Add stylesheet sync: popups initialize from and watch store changes
- Add click-to-close behavior: clicking another element closes popup
- Add CSS property tooltips on all form labels (editor panel + popups)
  with dotted underline and monospace code tooltip on hover
- Add field--view-only class and disabled attribute on locked fields

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

public/assets/css/src/_forms.scss

@@ -8,6 +8,41 @@ input[type="number"] {
   opacity: 0.3;
 }
 
+/* Label with CSS tooltip */
+.label-with-tooltip {
+  text-decoration: underline dotted;
+  text-decoration-color: var(--color-browngray-200);
+  text-underline-offset: 2px;
+  cursor: help;
+  position: relative;
+
+  &::after {
+    content: attr(data-css);
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    margin-bottom: 4px;
+    padding: 0.25rem 0.5rem;
+    background: var(--color-browngray-700);
+    color: var(--color-browngray-100);
+    font-family: "Courier New", Courier, monospace;
+    font-size: 0.75rem;
+    border-radius: 4px;
+    white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity 0.15s ease,
+      visibility 0.15s ease;
+    z-index: 10;
+  }
+
+  &:hover::after {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
 .settings-section {
   h2 {
     border-bottom: 1px solid #000;

public/assets/css/style.css

@@ -80,6 +80,38 @@ input[type=number] {
   opacity: 0.3;
 }
 
+/* Label with CSS tooltip */
+.label-with-tooltip {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+  text-decoration-color: var(--color-browngray-200);
+  text-underline-offset: 2px;
+  cursor: help;
+  position: relative;
+}
+.label-with-tooltip::after {
+  content: attr(data-css);
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 4px;
+  padding: 0.25rem 0.5rem;
+  background: var(--color-browngray-700);
+  color: var(--color-browngray-100);
+  font-family: "Courier New", Courier, monospace;
+  font-size: 0.75rem;
+  border-radius: 4px;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease, visibility 0.15s ease;
+  z-index: 10;
+}
+.label-with-tooltip:hover::after {
+  opacity: 1;
+  visibility: visible;
+}
+
 .settings-section h2 {
   border-bottom: 1px solid #000;
   margin-bottom: var(--space-xs);

public/assets/css/style.css.map

@@ -1 +1 @@
-{"version":3,"sources":["src/_reset.scss","style.css","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_buttons.scss"],"names":[],"mappings":"AAAA;;EAEE,UAAA;EACA,SAAA;ACCF;;ADEA;;;;;;EAME,SAAA;ACCF;;ADEA;;EAEE,YAAA;EACA,aAAA;EAEA,mCAAA;ACAF;;ADGA;EACE,6BAAA;EACA,YAAA;ACAF;;ACzBA;EACE,yBAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EAEA,uBAAA;EAEA,kBAAA;EAEA,uCAAA;ADyBF;;AEnCA;;;;;;;;;;;;;EAaE,uBAAA;AFsCF;;AGnDA,yBAAA;AACA;EACE,QAAA;EACA,2BAAA;AHsDF;AGpDA;EACE,8BAAA;OAAA,kBAAA;AHsDF;;AGnDA;EACE;IACE,sBAAA;EHsDF;AACF;AGpDA;EACE,+BAAA;AHsDF;;AIrEA;;;EAGE,4CAAA;AJwEF;;AIrEA;EACE,YAAA;AJwEF;;AIpEE;EACE,6BAAA;EACA,8BAAA;AJuEJ;AIrEE;EACE,mDAAA;AJuEJ;AIpEE;EACE,0BAAA;AJsEJ;AIpEI;EACE,8BAAA;AJsEN;AInEI;EACE,aAAA;AJqEN;AInEM;;EAEE,UAAA;AJqER;AIlEM;EACE,oCAAA;AJoER;AIjEM;EACE,aAAA;EACA,WAAA;AJmER;AIjEQ;EACE,aAAA;EACA,WAAA;AJmEV;AI/DM;EACE,UAAA;AJiER;AIhEQ;EACE,aAAA;AJkEV;AIjEU;EACE,kBAAA;EACA,eAAA;EACA,cAAA;EACA,SAAA;EACA,WAAA;EACA,eAAA;AJmEZ;AIhEU;EACE,oBAAA;EACA,WAAA;AJkEZ;AI5DI;EACE,aAAA;EACA,eAAA;EACA,wBAAA;AJ8DN;AI5DM;EACE,WAAA;AJ8DR;AI5DM;EACE,UAAA;AJ8DR;AI5DQ;EACE,UAAA;AJ8DV;AI1DU;EACE,UAAA;AJ4DZ;;AKlJA;EACE,eAAA;EAEA,4CAAA;EACA,iCAAA;EACA,uCAAA;EACA,mCAAA;EACA,sBAAA;ALoJF;AKlJE;EACE,sBAAA;EACA,WAAA;ALoJJ;AKhJI;EACE,sBAAA;EACA,WAAA;EACA,YAAA;ALkJN","file":"style.css"}
+{"version":3,"sources":["src/_reset.scss","style.css","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_buttons.scss"],"names":[],"mappings":"AAAA;;EAEE,UAAA;EACA,SAAA;ACCF;;ADEA;;;;;;EAME,SAAA;ACCF;;ADEA;;EAEE,YAAA;EACA,aAAA;EAEA,mCAAA;ACAF;;ADGA;EACE,6BAAA;EACA,YAAA;ACAF;;ACzBA;EACE,yBAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EAEA,uBAAA;EAEA,kBAAA;EAEA,uCAAA;ADyBF;;AEnCA;;;;;;;;;;;;;EAaE,uBAAA;AFsCF;;AGnDA,yBAAA;AACA;EACE,QAAA;EACA,2BAAA;AHsDF;AGpDA;EACE,8BAAA;OAAA,kBAAA;AHsDF;;AGnDA;EACE;IACE,sBAAA;EHsDF;AACF;AGpDA;EACE,+BAAA;AHsDF;;AIrEA;;;EAGE,4CAAA;AJwEF;;AIrEA;EACE,YAAA;AJwEF;;AIrEA,2BAAA;AACA;EACE,yCAAA;UAAA,iCAAA;EACA,iDAAA;EACA,0BAAA;EACA,YAAA;EACA,kBAAA;AJwEF;AItEE;EACE,uBAAA;EACA,kBAAA;EACA,YAAA;EACA,OAAA;EACA,kBAAA;EACA,uBAAA;EACA,sCAAA;EACA,iCAAA;EACA,8CAAA;EACA,kBAAA;EACA,kBAAA;EACA,mBAAA;EACA,UAAA;EACA,kBAAA;EACA,qDACE;EAEF,WAAA;AJsEJ;AInEE;EACE,UAAA;EACA,mBAAA;AJqEJ;;AIhEE;EACE,6BAAA;EACA,8BAAA;AJmEJ;AIjEE;EACE,mDAAA;AJmEJ;AIhEE;EACE,0BAAA;AJkEJ;AIhEI;EACE,8BAAA;AJkEN;AI/DI;EACE,aAAA;AJiEN;AI/DM;;EAEE,UAAA;AJiER;AI9DM;EACE,oCAAA;AJgER;AI7DM;EACE,aAAA;EACA,WAAA;AJ+DR;AI7DQ;EACE,aAAA;EACA,WAAA;AJ+DV;AI3DM;EACE,UAAA;AJ6DR;AI5DQ;EACE,aAAA;AJ8DV;AI7DU;EACE,kBAAA;EACA,eAAA;EACA,cAAA;EACA,SAAA;EACA,WAAA;EACA,eAAA;AJ+DZ;AI5DU;EACE,oBAAA;EACA,WAAA;AJ8DZ;AIxDI;EACE,aAAA;EACA,eAAA;EACA,wBAAA;AJ0DN;AIxDM;EACE,WAAA;AJ0DR;AIxDM;EACE,UAAA;AJ0DR;AIxDQ;EACE,UAAA;AJ0DV;AItDU;EACE,UAAA;AJwDZ;;AKjLA;EACE,eAAA;EAEA,4CAAA;EACA,iCAAA;EACA,uCAAA;EACA,mCAAA;EACA,sBAAA;ALmLF;AKjLE;EACE,sBAAA;EACA,WAAA;ALmLJ;AK/KI;EACE,sBAAA;EACA,WAAA;EACA,YAAA;ALiLN","file":"style.css"}

src/App.vue

@@ -86,7 +86,7 @@ const handleIframeClick = (event) => {
   // Check if clicking near a page edge
   if (hoveredPage.value) {
     event.stopPropagation();
-    pagePopup.value.open(hoveredPage.value);
+    pagePopup.value.open(hoveredPage.value, event);
     elementPopup.value.close();
     return;
   }

src/components/PagePopup.vue

@@ -20,18 +20,23 @@
         <div class="settings-subsection">
           <h4>Marges</h4>
           <div class="margin-grid">
-            <div class="field">
+            <div
-              <label>Haut</label>
+              class="field"
+              :class="{ 'field--view-only': inheritanceLocked }"
+            >
+              <label class="label-with-tooltip" data-css="margin-top">Haut</label>
               <div class="input-with-unit">
                 <input
                   type="number"
                   v-model.number="margins.top.value"
                   min="0"
+                  :disabled="inheritanceLocked"
                 />
                 <div class="unit-toggle">
                   <button
                     type="button"
                     :class="{ active: margins.top.unit === 'mm' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.top.unit = 'mm'"
                   >
                     mm
@@ -39,6 +44,7 @@
                   <button
                     type="button"
                     :class="{ active: margins.top.unit === 'px' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.top.unit = 'px'"
                   >
                     px
@@ -46,6 +52,7 @@
                   <button
                     type="button"
                     :class="{ active: margins.top.unit === 'rem' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.top.unit = 'rem'"
                   >
                     rem
@@ -54,18 +61,23 @@
               </div>
             </div>
 
-            <div class="field">
+            <div
-              <label>Bas</label>
+              class="field"
+              :class="{ 'field--view-only': inheritanceLocked }"
+            >
+              <label class="label-with-tooltip" data-css="margin-bottom">Bas</label>
               <div class="input-with-unit">
                 <input
                   type="number"
                   v-model.number="margins.bottom.value"
                   min="0"
+                  :disabled="inheritanceLocked"
                 />
                 <div class="unit-toggle">
                   <button
                     type="button"
                     :class="{ active: margins.bottom.unit === 'mm' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.bottom.unit = 'mm'"
                   >
                     mm
@@ -73,6 +85,7 @@
                   <button
                     type="button"
                     :class="{ active: margins.bottom.unit === 'px' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.bottom.unit = 'px'"
                   >
                     px
@@ -80,6 +93,7 @@
                   <button
                     type="button"
                     :class="{ active: margins.bottom.unit === 'rem' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.bottom.unit = 'rem'"
                   >
                     rem
@@ -88,18 +102,23 @@
               </div>
             </div>
 
-            <div class="field">
+            <div
-              <label>Gauche</label>
+              class="field"
+              :class="{ 'field--view-only': inheritanceLocked }"
+            >
+              <label class="label-with-tooltip" data-css="margin-left">Gauche</label>
               <div class="input-with-unit">
                 <input
                   type="number"
                   v-model.number="margins.left.value"
                   min="0"
+                  :disabled="inheritanceLocked"
                 />
                 <div class="unit-toggle">
                   <button
                     type="button"
                     :class="{ active: margins.left.unit === 'mm' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.left.unit = 'mm'"
                   >
                     mm
@@ -107,6 +126,7 @@
                   <button
                     type="button"
                     :class="{ active: margins.left.unit === 'px' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.left.unit = 'px'"
                   >
                     px
@@ -114,6 +134,7 @@
                   <button
                     type="button"
                     :class="{ active: margins.left.unit === 'rem' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.left.unit = 'rem'"
                   >
                     rem
@@ -122,18 +143,23 @@
               </div>
             </div>
 
-            <div class="field">
+            <div
-              <label>Droite</label>
+              class="field"
+              :class="{ 'field--view-only': inheritanceLocked }"
+            >
+              <label class="label-with-tooltip" data-css="margin-right">Droite</label>
               <div class="input-with-unit">
                 <input
                   type="number"
                   v-model.number="margins.right.value"
                   min="0"
+                  :disabled="inheritanceLocked"
                 />
                 <div class="unit-toggle">
                   <button
                     type="button"
                     :class="{ active: margins.right.unit === 'mm' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.right.unit = 'mm'"
                   >
                     mm
@@ -141,6 +167,7 @@
                   <button
                     type="button"
                     :class="{ active: margins.right.unit === 'px' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.right.unit = 'px'"
                   >
                     px
@@ -148,6 +175,7 @@
                   <button
                     type="button"
                     :class="{ active: margins.right.unit === 'rem' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.right.unit = 'rem'"
                   >
                     rem
@@ -160,13 +188,14 @@
 
         <!-- Background -->
         <div class="settings-subsection">
-          <div class="field">
+          <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
-            <label>Arrière-plan</label>
+            <label class="label-with-tooltip" data-css="background">Arrière-plan</label>
             <div class="input-with-color">
               <input
                 ref="backgroundColorInput"
                 type="text"
                 v-model="background.value"
+                :disabled="inheritanceLocked"
                 data-coloris
               />
             </div>
@@ -175,9 +204,9 @@
 
         <!-- Patterns -->
         <div class="settings-subsection">
-          <div class="field">
+          <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
-            <label>Motifs</label>
+            <label class="label-with-tooltip" data-css="background-image">Motifs</label>
-            <select v-model="pattern">
+            <select v-model="pattern" :disabled="inheritanceLocked">
               <option value="">Choisissez</option>
               <option value="dots">Points</option>
               <option value="lines">Lignes</option>
@@ -189,13 +218,31 @@
         <!-- Lock/Unlock Inheritance Button -->
         <div class="settings-subsection">
           <button class="inheritance-btn" @click="toggleInheritance">
-            <svg v-if="inheritanceLocked" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+            <svg
-              <path d="M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM5 12V20H19V12H5ZM11 14H13V18H11V14ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17Z"></path>
+              v-if="inheritanceLocked"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+            >
+              <path
+                d="M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM5 12V20H19V12H5ZM11 14H13V18H11V14ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17Z"
+              ></path>
             </svg>
-            <svg v-else xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+            <svg
-              <path d="M7 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C14.7405 2 17.1131 3.5748 18.2624 5.86882L16.4731 6.76344C15.6522 5.12486 13.9575 4 12 4C9.23858 4 7 6.23858 7 9V10ZM5 12V20H19V12H5ZM10 15H14V17H10V15Z"></path>
+              v-else
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+            >
+              <path
+                d="M7 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C14.7405 2 17.1131 3.5748 18.2624 5.86882L16.4731 6.76344C15.6522 5.12486 13.9575 4 12 4C9.23858 4 7 6.23858 7 9V10ZM5 12V20H19V12H5ZM10 15H14V17H10V15Z"
+              ></path>
             </svg>
-            <span>{{ inheritanceLocked ? 'Déverrouiller l\'héritage' : 'Verrouiller l\'héritage' }}</span>
+            <span>{{
+              inheritanceLocked
+                ? "Déverrouiller l'héritage"
+                : "Verrouiller l'héritage"
+            }}</span>
           </button>
         </div>
       </div>
@@ -204,17 +251,28 @@
       <div class="popup-css">
         <div class="css-header">
           <span>CSS</span>
-          <label class="toggle">
+          <label
+            class="toggle"
+            :class="{ 'field--view-only': inheritanceLocked }"
+          >
             <span class="toggle-label">Mode édition</span>
-            <input type="checkbox" v-model="isEditable" />
+            <input
+              type="checkbox"
+              v-model="isEditable"
+              :disabled="inheritanceLocked"
+            />
             <span class="toggle-switch"></span>
           </label>
         </div>
-        <pre v-if="!isEditable" class="readonly"><code class="hljs language-css" v-html="highlightedCss"></code></pre>
+        <pre
+          v-if="!isEditable"
+          class="readonly"
+        ><code class="hljs language-css" v-html="highlightedCss"></code></pre>
         <textarea
           v-else
           :value="pageCss"
           @input="handleCssInput"
+          :disabled="inheritanceLocked"
           spellcheck="false"
         ></textarea>
       </div>
@@ -225,6 +283,7 @@
 <script setup>
 import { ref, computed, watch, onMounted } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
+import { usePopupPosition } from '../composables/usePopupPosition';
 import Coloris from '@melloware/coloris';
 import '@melloware/coloris/dist/coloris.css';
 import hljs from 'highlight.js/lib/core';
@@ -272,14 +331,10 @@ const immediateUpdate = (callback) => {
   callback();
 };
 
-const calculatePosition = (pageElement) => {
+const POPUP_WIDTH = 550;
-  const rect = pageElement.getBoundingClientRect();
+const POPUP_HEIGHT = 600;
-  const iframeRect = props.iframeRef.getBoundingClientRect();
+
-  return {
+const { calculatePosition } = usePopupPosition(POPUP_WIDTH, POPUP_HEIGHT);
-    x: iframeRect.left + rect.left + 20,
-    y: iframeRect.top + rect.top + 20,
-  };
-};
 
 const updateMargins = () => {
   const marginValue = `${margins.value.top.value}${margins.value.top.unit} ${margins.value.right.value}${margins.value.right.unit} ${margins.value.bottom.value}${margins.value.bottom.unit} ${margins.value.left.value}${margins.value.left.unit}`;
@@ -362,13 +417,61 @@ watch(
   }
 );
 
-const open = (pageElement) => {
+const loadValuesFromStylesheet = () => {
+  try {
+    isUpdatingFromStore = true;
+
+    // Extract margin from @page
+    const marginData = stylesheetStore.extractValue('@page', 'margin');
+    if (marginData) {
+      // Parse margin shorthand (top right bottom left)
+      const marginStr = typeof marginData === 'string' ? marginData : marginData.value;
+      const marginValues = marginStr.split(' ');
+
+      if (marginValues.length === 4) {
+        // Parse each margin value
+        const parseMargin = (value) => {
+          const match = value.match(/^([\d.]+)(\w+)$/);
+          if (match) {
+            return { value: parseFloat(match[1]), unit: match[2] };
+          }
+          return { value: 0, unit: 'mm' };
+        };
+
+        const top = parseMargin(marginValues[0]);
+        const right = parseMargin(marginValues[1]);
+        const bottom = parseMargin(marginValues[2]);
+        const left = parseMargin(marginValues[3]);
+
+        margins.value.top = top;
+        margins.value.right = right;
+        margins.value.bottom = bottom;
+        margins.value.left = left;
+      }
+    }
+
+    // Extract background from @page
+    const backgroundData = stylesheetStore.extractValue('@page', 'background');
+    if (backgroundData) {
+      background.value.value = typeof backgroundData === 'string' ? backgroundData : backgroundData.value;
+    }
+  } catch (error) {
+    console.error('Error loading values from stylesheet:', error);
+  } finally {
+    isUpdatingFromStore = false;
+  }
+};
+
+const open = (pageElement, event) => {
   selectedPageElement.value = pageElement;
-  position.value = calculatePosition(pageElement);
+  position.value = calculatePosition(event);
 
   // Add border to the selected page
   pageElement.style.outline = '2px solid #61afef';
 
+  // Load values from stylesheet
+  loadValuesFromStylesheet();
+
   visible.value = true;
 
   // Initialize Coloris after opening
@@ -439,7 +542,10 @@ const handleCssInput = (event) => {
   cssDebounceTimer = setTimeout(() => {
     const oldBlock = pageCss.value;
     if (oldBlock) {
-      stylesheetStore.content = stylesheetStore.content.replace(oldBlock, newCss);
+      stylesheetStore.content = stylesheetStore.content.replace(
+        oldBlock,
+        newCss
+      );
     }
   }, 500);
 };
@@ -454,6 +560,16 @@ watch(isEditable, async (newValue, oldValue) => {
   }
 });
 
+// Watch stylesheet changes to sync values
+watch(
+  () => stylesheetStore.content,
+  () => {
+    if (visible.value && !stylesheetStore.isEditing) {
+      loadValuesFromStylesheet();
+    }
+  }
+);
+
 defineExpose({ open, close, visible });
 </script>
 
@@ -542,7 +658,37 @@ defineExpose({ open, close, visible });
   gap: 0.75rem;
 }
 
-/* Unit toggle styles are inherited from global styles */
+/* Label with CSS tooltip */
+.label-with-tooltip {
+  text-decoration: underline dotted;
+  text-underline-offset: 2px;
+  cursor: help;
+  position: relative;
+}
+
+.label-with-tooltip::after {
+  content: attr(data-css);
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 4px;
+  padding: 0.25rem 0.5rem;
+  background: var(--color-browngray-700, #3d3d3d);
+  color: var(--color-browngray-100, #f5f5f5);
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.75rem;
+  border-radius: 4px;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease, visibility 0.15s ease;
+  z-index: 10;
+}
+
+.label-with-tooltip:hover::after {
+  opacity: 1;
+  visibility: visible;
+}
 
 .inheritance-btn {
   display: flex;

src/components/editor/PageSettings.vue

@@ -4,7 +4,9 @@
 
     <div class="settings-subsection">
       <div class="field">
-        <label for="page-format">Format d'impression</label>
+        <label for="page-format" class="label-with-tooltip" data-css="size"
+          >Format d'impression</label
+        >
         <select id="page-format" v-model="pageFormat">
           <option value="A4">A4</option>
           <option value="A5">A5</option>
@@ -17,7 +19,9 @@
 
     <div class="settings-subsection">
       <div class="field field--view-only">
-        <label for="page-width">Largeur</label>
+        <label for="page-width" class="label-with-tooltip" data-css="width"
+          >Largeur</label
+        >
         <input
           id="page-width"
           type="number"
@@ -28,7 +32,9 @@
       </div>
 
       <div class="field field--view-only">
-        <label for="page-height">Hauteur</label>
+        <label for="page-height" class="label-with-tooltip" data-css="height"
+          >Hauteur</label
+        >
         <input
           id="page-height"
           type="number"
@@ -43,7 +49,9 @@
       <h3>Marges</h3>
 
       <div class="field">
-        <label for="margin-top">Haut</label>
+        <label for="margin-top" class="label-with-tooltip" data-css="margin-top"
+          >Haut</label
+        >
         <div class="input-with-unit">
           <input
             id="margin-top"
@@ -78,7 +86,12 @@
       </div>
 
       <div class="field">
-        <label for="margin-bottom">Bas</label>
+        <label
+          for="margin-bottom"
+          class="label-with-tooltip"
+          data-css="margin-bottom"
+          >Bas</label
+        >
         <div class="input-with-unit">
           <input
             id="margin-bottom"
@@ -113,7 +126,12 @@
       </div>
 
       <div class="field">
-        <label for="margin-left">Gauche</label>
+        <label
+          for="margin-left"
+          class="label-with-tooltip"
+          data-css="margin-left"
+          >Gauche</label
+        >
         <div class="input-with-unit">
           <input
             id="margin-left"
@@ -148,7 +166,12 @@
       </div>
 
       <div class="field">
-        <label for="margin-right">Droite</label>
+        <label
+          for="margin-right"
+          class="label-with-tooltip"
+          data-css="margin-right"
+          >Droite</label
+        >
         <div class="input-with-unit">
           <input
             id="margin-right"
@@ -185,7 +208,9 @@
 
     <div class="settings-subsection">
       <div class="field">
-        <label for="background">Arrière-plan</label>
+        <label for="background" class="label-with-tooltip" data-css="background"
+          >Arrière-plan</label
+        >
         <div class="input-with-color">
           <input
             ref="backgroundColorInput"
@@ -218,7 +243,12 @@
 
     <div class="settings-subsection">
       <div class="field">
-        <label for="pattern">Motif</label>
+        <label
+          for="pattern"
+          class="label-with-tooltip"
+          data-css="background-image"
+          >Motif</label
+        >
         <select id="pattern" v-model="pattern">
           <option value="">Choisissez</option>
           <option value="dots">Points</option>
@@ -231,12 +261,22 @@
     <div class="settings-subsection">
       <div class="field checkbox-field">
         <input id="page-numbers" type="checkbox" v-model="pageNumbers" />
-        <label for="page-numbers">Numéro de page</label>
+        <label
+          for="page-numbers"
+          class="label-with-tooltip"
+          data-css="@bottom-left/right"
+          >Numéro de page</label
+        >
       </div>
 
       <div class="field checkbox-field">
         <input id="running-title" type="checkbox" v-model="runningTitle" />
-        <label for="running-title">Titre courant</label>
+        <label
+          for="running-title"
+          class="label-with-tooltip"
+          data-css="string-set"
+          >Titre courant</label
+        >
       </div>
     </div>
   </section>

src/components/editor/TextSettings.vue

@@ -9,14 +9,14 @@
     <!-- Police -->
     <div class="settings-subsection">
       <div class="field">
-        <label for="text-font">Police</label>
+        <label for="text-font" class="label-with-tooltip" data-css="font-family">Police</label>
         <div class="field-with-option">
           <select id="text-font" v-model="font">
             <option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
           </select>
           <div class="field-checkbox">
             <input id="text-italic" type="checkbox" v-model="italic" />
-            <label for="text-italic">Italique</label>
+            <label for="text-italic" class="label-with-tooltip" data-css="font-style">Italique</label>
           </div>
         </div>
       </div>
@@ -25,7 +25,7 @@
     <!-- Graisse -->
     <div class="settings-subsection">
       <div class="field">
-        <label>Graisse</label>
+        <label class="label-with-tooltip" data-css="font-weight">Graisse</label>
         <UnitToggle v-model="weight" :units="weights" />
       </div>
     </div>
@@ -33,7 +33,7 @@
     <!-- Taille du texte -->
     <div class="settings-subsection">
       <div class="field">
-        <label for="text-size-range">Taille du texte</label>
+        <label for="text-size-range" class="label-with-tooltip" data-css="font-size">Taille du texte</label>
         <InputWithUnit
           v-model="fontSize"
           :units="['px', 'em', 'rem']"
@@ -47,7 +47,7 @@
     <!-- Alignement -->
     <div class="settings-subsection">
       <div class="field">
-        <label for="text-alignment">Alignement</label>
+        <label for="text-alignment" class="label-with-tooltip" data-css="text-align">Alignement</label>
         <select id="text-alignment" v-model="alignment">
           <option v-for="a in alignments" :key="a.value" :value="a.value">
             {{ a.label }}
@@ -59,7 +59,7 @@
     <!-- Couleurs -->
     <div class="settings-subsection">
       <div class="field">
-        <label for="text-color">Couleur</label>
+        <label for="text-color" class="label-with-tooltip" data-css="color">Couleur</label>
         <div class="input-with-color">
           <input
             id="text-color"
@@ -71,7 +71,7 @@
         </div>
       </div>
       <div class="field">
-        <label for="text-background">Arrière-plan</label>
+        <label for="text-background" class="label-with-tooltip" data-css="background">Arrière-plan</label>
         <div class="input-with-color">
           <input
             id="text-background"
@@ -90,6 +90,7 @@
         ref="marginOuterEditor"
         id="margin-outer"
         label="Marges extérieures"
+        cssProperty="margin"
         v-model:simple="marginOuter"
         v-model:detailed="marginOuterDetailed"
         :units="['mm', 'px', 'rem']"
@@ -103,6 +104,7 @@
         ref="marginInnerEditor"
         id="margin-inner"
         label="Marges intérieures"
+        cssProperty="padding"
         v-model:simple="marginInner"
         v-model:detailed="marginInnerDetailed"
         :units="['mm', 'px', 'rem']"

src/components/ui/MarginEditor.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="margin-editor">
     <div class="field">
-      <label :for="id">{{ label }}</label>
+      <label :for="id" class="label-with-tooltip" :data-css="cssProperty">{{ label }}</label>
       <div class="input-with-unit">
         <input
           :id="id"
@@ -29,7 +29,7 @@
 
     <div v-if="expanded" class="subsection collapsed-section">
       <div v-for="side in sides" :key="side.key" class="field">
-        <label :for="`${id}-${side.key}`">{{ side.label }}</label>
+        <label :for="`${id}-${side.key}`" class="label-with-tooltip" :data-css="`${cssProperty}-${side.key}`">{{ side.label }}</label>
         <div class="input-with-unit">
           <input
             :id="`${id}-${side.key}`"
@@ -62,6 +62,10 @@ const props = defineProps({
     type: String,
     required: true
   },
+  cssProperty: {
+    type: String,
+    default: 'margin'
+  },
   simple: {
     type: Object,
     required: true,

src/composables/usePopupPosition.js

@@ -0,0 +1,52 @@
+export function usePopupPosition(popupWidth, popupHeight) {
+  const OFFSET = 10; // Distance from cursor
+
+  const calculatePosition = (event) => {
+    // Get cursor position relative to viewport
+    const cursorX = event.clientX;
+    const cursorY = event.clientY;
+
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    let x, y;
+
+    // Try bottom-right
+    if (
+      cursorX + OFFSET + popupWidth <= viewportWidth &&
+      cursorY + OFFSET + popupHeight <= viewportHeight
+    ) {
+      x = cursorX + OFFSET;
+      y = cursorY + OFFSET;
+    }
+    // Try bottom-left
+    else if (
+      cursorX - OFFSET - popupWidth >= 0 &&
+      cursorY + OFFSET + popupHeight <= viewportHeight
+    ) {
+      x = cursorX - OFFSET - popupWidth;
+      y = cursorY + OFFSET;
+    }
+    // Try top-right
+    else if (
+      cursorX + OFFSET + popupWidth <= viewportWidth &&
+      cursorY - OFFSET - popupHeight >= 0
+    ) {
+      x = cursorX + OFFSET;
+      y = cursorY - OFFSET - popupHeight;
+    }
+    // Try top-left (fallback)
+    else {
+      x = cursorX - OFFSET - popupWidth;
+      y = cursorY - OFFSET - popupHeight;
+
+      // Ensure it doesn't go off-screen
+      x = Math.max(10, x);
+      y = Math.max(10, y);
+    }
+
+    return { x, y };
+  };
+
+  return { calculatePosition };
+}