XIRR Label

frontend/src/pages/InvestissementDetail.jsx

@@ -971,15 +971,29 @@ export default function InvestissementDetail() {
         </div>
         {(() => {
           const rendement = netMode ? rendementReel : rendementReelBrut;
-          const baseTip = netMode ? 'XIRR sur flux nets réels (après fiscalité)' : 'XIRR sur flux bruts (avant fiscalité)';
-          const titleTip  = rendement !== null
-            ? baseTip + (rendementEstime ? ' — estimation : capital restant dû valorisé à la date du jour' : '')
-            : 'Nécessite au moins un remboursement enregistré';
+          const xirrExplication =
+            `XIRR (taux de rendement interne actualisé) : taux annualisé calculé à partir des flux réels datés ` +
+            `(versement initial, réinvestissements, remboursements ${netMode ? 'nets, après fiscalité' : 'bruts, avant fiscalité'}). ` +
+            `Chaque flux est pondéré par sa date exacte — deux prêts au même total mais versés à des rythmes différents auront un XIRR différent.\n\n` +
+            (rendementEstime
+              ? "Prêt pas encore soldé : le capital restant dû est ajouté en flux final, valorisé à la date du jour — c'est donc une estimation, pas un taux définitif."
+              : 'Prêt intégralement remboursé : taux définitif.');
           return (
-            <div className="kpi" title={titleTip}>
-              <div className="label">
-                Rendement annualisé — {netMode ? 'Net' : 'Brut'}
+            <div className="kpi">
+              <div className="label" style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                <span>
+                  XIRR — {netMode ? 'Net' : 'Brut'}
                   {rendementEstime && rendement !== null ? <span className="text-muted"> (estimé)</span> : ''}
+                </span>
+                <span
+                  className="cell-tooltip tooltip-down"
+                  data-tooltip={xirrExplication}
+                  style={{ display: 'inline-flex', color: 'var(--text-muted)' }}
+                >
+                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                    <circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/>
+                  </svg>
+                </span>
               </div>
               <div className="value" style={{ color: rendement !== null ? (rendement >= 0 ? 'var(--success)' : 'var(--danger)') : 'var(--text-muted)' }}>
                 {rendement !== null

frontend/src/styles.css

@@ -1417,6 +1417,14 @@ tr:hover td { background: var(--surface-2); }
 }
 .cell-tooltip:hover::after { opacity: 1; }
 
+/* Variante ouvrant vers le bas — pour les éléments proches du haut de la fenêtre
+   (ex. icône d'info dans une carte KPI), où le popup par défaut (vers le haut)
+   sortirait de l'écran. */
+.cell-tooltip.tooltip-down::after {
+  top: calc(100% + 6px);
+  bottom: auto;
+}
+
 /* ── Tableau Remboursements enregistrés (InvestissementDetail) ────────── */
 .remb-table { table-layout: fixed; width: 100%; }
 .remb-table th, .remb-table td { text-align: center; }