arengibook 3.1.51-itemWithTooltip → 3.1.52-itemWithTooltip

package/dist/index.js

@@ -37113,6 +37113,8 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     var virtualScrollerOptions = _ref.virtualScrollerOptions,
     _ref$enableItemToolti = _ref.enableItemTooltip,
     enableItemTooltip = _ref$enableItemToolti === void 0 ? false : _ref$enableItemToolti,
+    _ref$tooltipWidth = _ref.tooltipWidth,
+    tooltipWidth = _ref$tooltipWidth === void 0 ? '220px' : _ref$tooltipWidth,
     _ref$enableItemLink = _ref.enableItemLink,
     enableItemLink = _ref$enableItemLink === void 0 ? false : _ref$enableItemLink,
     _ref$openOnHover = _ref.openOnHover,
@@ -37159,24 +37161,31 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     _useState12 = _slicedToArray$d(_useState11, 2),
     tooltipKey = _useState12[0],
     setTooltipKey = _useState12[1];
-  var _useState13 = useState(null),
+  // 'right' : flèche du tooltip sur le picto i
+  // 'panelBottom' : tooltip sous le panel d'options
+  // 'panelTop' : tooltip au-dessus du panel d'options
+  var _useState13 = useState('right'),
     _useState14 = _slicedToArray$d(_useState13, 2),
-    sortOrder = _useState14[0],
-    setSortOrder = _useState14[1];
-  var _useState15 = useState(false),
+    tooltipMode = _useState14[0],
+    setTooltipMode = _useState14[1];
+  var _useState15 = useState(null),
     _useState16 = _slicedToArray$d(_useState15, 2),
-    isDropdownOpen = _useState16[0],
-    setIsDropdownOpen = _useState16[1];
-  var _useState17 = useState(''),
+    sortOrder = _useState16[0],
+    setSortOrder = _useState16[1];
+  var _useState17 = useState(false),
     _useState18 = _slicedToArray$d(_useState17, 2),
-    selectedGroupLabel = _useState18[0],
-    setSelectedGroupLabel = _useState18[1];
+    isDropdownOpen = _useState18[0],
+    setIsDropdownOpen = _useState18[1];
+  var _useState19 = useState(''),
+    _useState20 = _slicedToArray$d(_useState19, 2),
+    selectedGroupLabel = _useState20[0],
+    setSelectedGroupLabel = _useState20[1];
 
   // 🔹 Lazy loading
-  var _useState19 = useState(false),
-    _useState20 = _slicedToArray$d(_useState19, 2),
-    loading = _useState20[0],
-    setLoading = _useState20[1];
+  var _useState21 = useState(false),
+    _useState22 = _slicedToArray$d(_useState21, 2),
+    loading = _useState22[0],
+    setLoading = _useState22[1];
   var loadLazyTimeout = useRef();
   var currentPageRef = useRef(1);
   var hasMoreRef = useRef(true);
@@ -37223,6 +37232,94 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
       return observer.disconnect();
     };
   }, [enableItemTooltip]);
+
+  // --- Détection de la place autour du composant / panel ---
+  useEffect(function () {
+    if (!enableItemTooltip) return undefined;
+    var computeMode = function computeMode() {
+      var container = dropdownRef.current;
+      if (!container) return;
+      var cRect = container.getBoundingClientRect();
+      var tooltipPxWidth = parseInt(String(tooltipWidth), 10) || 220;
+      var spaceRight = window.innerWidth - cRect.right;
+      if (spaceRight >= tooltipPxWidth + 40) {
+        setTooltipMode('right');
+        return;
+      }
+      var panel = document.querySelector('.p-dropdown-panel.p-component');
+      var anchor = panel || container;
+      var aRect = anchor.getBoundingClientRect();
+      var estimateHeight = 120;
+      var spaceBottom = window.innerHeight - aRect.bottom;
+      var spaceTop = aRect.top;
+      if (spaceBottom >= estimateHeight + 16) {
+        setTooltipMode('panelBottom');
+      } else if (spaceTop >= estimateHeight + 16) {
+        setTooltipMode('panelTop');
+      } else {
+        setTooltipMode('panelBottom');
+      }
+    };
+    computeMode();
+    window.addEventListener('resize', computeMode);
+    window.addEventListener('scroll', computeMode, true);
+    return function () {
+      window.removeEventListener('resize', computeMode);
+      window.removeEventListener('scroll', computeMode, true);
+    };
+  }, [enableItemTooltip, tooltipWidth]);
+
+  // --- Repositionnement fin du tooltip ---
+  useEffect(function () {
+    if (!enableItemTooltip) return undefined;
+    var hoveredRow = null;
+    var reposition = function reposition() {
+      var tooltipEl = document.querySelector('.p-tooltip.p-component');
+      if (!tooltipEl) return;
+      var arrowEl = tooltipEl.querySelector('.p-tooltip-arrow');
+      if (tooltipMode === 'right') {
+        var _hoveredRow;
+        var iconEl = (_hoveredRow = hoveredRow) === null || _hoveredRow === void 0 ? void 0 : _hoveredRow.querySelector('.dropdown-item-info-icon');
+        if (!iconEl) return;
+        var iconRect = iconEl.getBoundingClientRect();
+        var tt = tooltipEl.getBoundingClientRect();
+        tooltipEl.style.top = "".concat(iconRect.top + iconRect.height / 2 - tt.height / 2 + window.scrollY, "px");
+        tooltipEl.style.left = "".concat(iconRect.right + 12 + window.scrollX, "px");
+        if (arrowEl) {
+          arrowEl.style.display = '';
+          arrowEl.style.top = '50%';
+          arrowEl.style.marginTop = '-0.25rem';
+        }
+      } else {
+        var panel = document.querySelector('.p-dropdown-panel.p-component');
+        if (!panel) return;
+        var pRect = panel.getBoundingClientRect();
+        var _tt = tooltipEl.getBoundingClientRect();
+        if (tooltipMode === 'panelBottom') {
+          tooltipEl.style.top = "".concat(pRect.bottom + 8 + window.scrollY, "px");
+        } else {
+          tooltipEl.style.top = "".concat(pRect.top - _tt.height - 8 + window.scrollY, "px");
+        }
+        tooltipEl.style.left = "".concat(pRect.left + window.scrollX, "px");
+        if (arrowEl) arrowEl.style.display = 'none';
+      }
+    };
+    var trackHover = function trackHover(e) {
+      var _e$target, _e$target$closest;
+      var row = (_e$target = e.target) === null || _e$target === void 0 || (_e$target$closest = _e$target.closest) === null || _e$target$closest === void 0 ? void 0 : _e$target$closest.call(_e$target, '.dropdown-tooltip-item, .dropdown-tooltip-trigger');
+      if (row) {
+        hoveredRow = row;
+        requestAnimationFrame(reposition);
+        requestAnimationFrame(function () {
+          return requestAnimationFrame(reposition);
+        });
+      }
+    };
+    document.addEventListener('mouseover', trackHover);
+    return function () {
+      return document.removeEventListener('mouseover', trackHover);
+    };
+  }, [enableItemTooltip, tooltipMode]);
   var optionTemplate = function optionTemplate(option) {
     var _ref2 = selectMetaConfig || {},
       labelStyle = _ref2.labelStyle,
@@ -37932,6 +38029,15 @@ var DropdownSelectMetaAsync = function DropdownSelectMetaAsync(_ref) {
     hideDelay: 150,
     style: {
       zIndex: 9999999
+    },
+    pt: {
+      text: {
+        style: {
+          width: tooltipWidth,
+          maxWidth: tooltipWidth,
+          whiteSpace: 'normal'
+        }
+      }
     }
   }), /*#__PURE__*/React__default.createElement(Dropdown$1, _extends$J({
     ref: dropdownComposantRef,
@@ -38124,6 +38230,8 @@ var Dropdown = function Dropdown(props) {
     virtualScrollerOptions = props.virtualScrollerOptions,
     _props$enableItemTool = props.enableItemTooltip,
     enableItemTooltip = _props$enableItemTool === void 0 ? false : _props$enableItemTool,
+    _props$tooltipWidth = props.tooltipWidth,
+    tooltipWidth = _props$tooltipWidth === void 0 ? '220px' : _props$tooltipWidth,
     _props$enableItemLink = props.enableItemLink,
     enableItemLink = _props$enableItemLink === void 0 ? false : _props$enableItemLink,
     _props$openOnHover = props.openOnHover,
@@ -38176,14 +38284,21 @@ var Dropdown = function Dropdown(props) {
     _useState0 = _slicedToArray$d(_useState9, 2),
     tooltipKey = _useState0[0],
     setTooltipKey = _useState0[1];
-  var _useState1 = useState(null),
+  // 'right' : à droite du picto i (comportement par défaut)
+  // 'panelBottom' : sous le panel d'options (si pas assez de place à droite)
+  // 'panelTop' : au-dessus du panel d'options (si pas assez de place en bas non plus)
+  var _useState1 = useState('right'),
     _useState10 = _slicedToArray$d(_useState1, 2),
-    sortOrder = _useState10[0],
-    setSortOrder = _useState10[1];
-  var _useState11 = useState(false),
+    tooltipMode = _useState10[0],
+    setTooltipMode = _useState10[1];
+  var _useState11 = useState(null),
     _useState12 = _slicedToArray$d(_useState11, 2),
-    showRequiredError = _useState12[0],
-    setShowRequiredError = _useState12[1];
+    sortOrder = _useState12[0],
+    setSortOrder = _useState12[1];
+  var _useState13 = useState(false),
+    _useState14 = _slicedToArray$d(_useState13, 2),
+    showRequiredError = _useState14[0],
+    setShowRequiredError = _useState14[1];
 
   // --- Derived values ---
   var hasSelection = options.some(function (opt) {
@@ -38314,6 +38429,100 @@ var Dropdown = function Dropdown(props) {
     };
   }, [enableItemTooltip]);
 
+  // --- Détection de la place autour du composant / panel ---
+  // Priorité 1 : à droite du picto i (mode 'right')
+  // Priorité 2 : sous le panel d'options (mode 'panelBottom')
+  // Priorité 3 : au-dessus du panel d'options (mode 'panelTop')
+  useEffect(function () {
+    if (!enableItemTooltip) return undefined;
+    var computeMode = function computeMode() {
+      var container = containerRef.current;
+      if (!container) return;
+      var cRect = container.getBoundingClientRect();
+      var tooltipPxWidth = parseInt(String(tooltipWidth), 10) || 220;
+      var spaceRight = window.innerWidth - cRect.right;
+      if (spaceRight >= tooltipPxWidth + 40) {
+        setTooltipMode('right');
+        return;
+      }
+      var panel = document.querySelector('.p-dropdown-panel.p-component');
+      var anchor = panel || container;
+      var aRect = anchor.getBoundingClientRect();
+      var estimateHeight = 120; // hauteur approximative du tooltip
+      var spaceBottom = window.innerHeight - aRect.bottom;
+      var spaceTop = aRect.top;
+      if (spaceBottom >= estimateHeight + 16) {
+        setTooltipMode('panelBottom');
+      } else if (spaceTop >= estimateHeight + 16) {
+        setTooltipMode('panelTop');
+      } else {
+        setTooltipMode('panelBottom');
+      }
+    };
+    computeMode();
+    window.addEventListener('resize', computeMode);
+    window.addEventListener('scroll', computeMode, true);
+    return function () {
+      window.removeEventListener('resize', computeMode);
+      window.removeEventListener('scroll', computeMode, true);
+    };
+  }, [enableItemTooltip, isDropdownOpen, tooltipWidth]);
+
+  // --- Repositionnement fin du tooltip ---
+  // Mode 'right' : la flèche du tooltip pointe précisément sur le picto i.
+  // Modes 'panelBottom' / 'panelTop' : tooltip ancré sous / au-dessus du panel
+  // (une seule position pour tous les items ; flèche masquée).
+  useEffect(function () {
+    if (!enableItemTooltip) return undefined;
+    var hoveredRow = null;
+    var trackHover = function trackHover(e) {
+      var _e$target, _e$target$closest;
+      var row = (_e$target = e.target) === null || _e$target === void 0 || (_e$target$closest = _e$target.closest) === null || _e$target$closest === void 0 ? void 0 : _e$target$closest.call(_e$target, '.dropdown-tooltip-item, .dropdown-tooltip-trigger');
+      if (row) {
+        hoveredRow = row;
+        requestAnimationFrame(reposition);
+        requestAnimationFrame(function () {
+          return requestAnimationFrame(reposition);
+        });
+      }
+    };
+    var reposition = function reposition() {
+      var tooltipEl = document.querySelector('.p-tooltip.p-component');
+      if (!tooltipEl) return;
+      var arrowEl = tooltipEl.querySelector('.p-tooltip-arrow');
+      if (tooltipMode === 'right') {
+        var _hoveredRow;
+        var iconEl = (_hoveredRow = hoveredRow) === null || _hoveredRow === void 0 ? void 0 : _hoveredRow.querySelector('.dropdown-item-info-icon');
+        if (!iconEl) return;
+        var iconRect = iconEl.getBoundingClientRect();
+        var tt = tooltipEl.getBoundingClientRect();
+        tooltipEl.style.top = "".concat(iconRect.top + iconRect.height / 2 - tt.height / 2 + window.scrollY, "px");
+        tooltipEl.style.left = "".concat(iconRect.right + 12 + window.scrollX, "px");
+        if (arrowEl) {
+          arrowEl.style.display = '';
+          arrowEl.style.top = '50%';
+          arrowEl.style.marginTop = '-0.25rem';
+        }
+      } else {
+        var panel = document.querySelector('.p-dropdown-panel.p-component');
+        if (!panel) return;
+        var pRect = panel.getBoundingClientRect();
+        var _tt = tooltipEl.getBoundingClientRect();
+        if (tooltipMode === 'panelBottom') {
+          tooltipEl.style.top = "".concat(pRect.bottom + 8 + window.scrollY, "px");
+        } else {
+          tooltipEl.style.top = "".concat(pRect.top - _tt.height - 8 + window.scrollY, "px");
+        }
+        tooltipEl.style.left = "".concat(pRect.left + window.scrollX, "px");
+        if (arrowEl) arrowEl.style.display = 'none';
+      }
+    };
+    document.addEventListener('mouseover', trackHover);
+    return function () {
+      return document.removeEventListener('mouseover', trackHover);
+    };
+  }, [enableItemTooltip, tooltipMode]);
+
   // --- Event handlers ---
   var handleShow = function handleShow() {
     return setIsDropdownOpen(true);
@@ -38849,6 +39058,15 @@ var Dropdown = function Dropdown(props) {
     hideDelay: 150,
     style: {
       zIndex: 9999999
+    },
+    pt: {
+      text: {
+        style: {
+          width: tooltipWidth,
+          maxWidth: tooltipWidth,
+          whiteSpace: 'normal'
+        }
+      }
     }
   }), /*#__PURE__*/React__default.createElement("div", _extends$J({}, cleanAttr, {
     style: {
@@ -41791,6 +42009,8 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
     isSelectMeta = _ref$isSelectMeta === void 0 ? false : _ref$isSelectMeta,
     _ref$enableItemToolti = _ref.enableItemTooltip,
     enableItemTooltip = _ref$enableItemToolti === void 0 ? false : _ref$enableItemToolti,
+    _ref$tooltipWidth = _ref.tooltipWidth,
+    tooltipWidth = _ref$tooltipWidth === void 0 ? '220px' : _ref$tooltipWidth,
     _ref$enableItemLink = _ref.enableItemLink,
     enableItemLink = _ref$enableItemLink === void 0 ? false : _ref$enableItemLink,
     _ref$enableSecondaryL = _ref.enableSecondaryLabel,
@@ -41862,30 +42082,37 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
     _useState8 = _slicedToArray$d(_useState7, 2),
     tooltipKey = _useState8[0],
     setTooltipKey = _useState8[1];
-  var _useState9 = useState(null),
+  // 'right' : flèche du tooltip sur le picto i
+  // 'panelBottom' : tooltip sous le panel d'options
+  // 'panelTop' : tooltip au-dessus du panel d'options
+  var _useState9 = useState('right'),
     _useState0 = _slicedToArray$d(_useState9, 2),
-    sortOrder = _useState0[0],
-    setSortOrder = _useState0[1];
-  var _useState1 = useState([]),
+    tooltipMode = _useState0[0],
+    setTooltipMode = _useState0[1];
+  var _useState1 = useState(null),
     _useState10 = _slicedToArray$d(_useState1, 2),
-    collapsedGroups = _useState10[0],
-    setCollapsedGroups = _useState10[1];
-  var _useState11 = useState(value !== null && value !== void 0 ? value : []),
-    _useState12 = _slicedToArray$d(_useState11, 2);
-    _useState12[0];
-    _useState12[1];
-  var _useState13 = useState(null),
-    _useState14 = _slicedToArray$d(_useState13, 2),
-    displayValue = _useState14[0],
-    setDisplayValue = _useState14[1];
+    sortOrder = _useState10[0],
+    setSortOrder = _useState10[1];
+  var _useState11 = useState([]),
+    _useState12 = _slicedToArray$d(_useState11, 2),
+    collapsedGroups = _useState12[0],
+    setCollapsedGroups = _useState12[1];
+  var _useState13 = useState(value !== null && value !== void 0 ? value : []),
+    _useState14 = _slicedToArray$d(_useState13, 2);
+    _useState14[0];
+    _useState14[1];
+  var _useState15 = useState(null),
+    _useState16 = _slicedToArray$d(_useState15, 2),
+    displayValue = _useState16[0],
+    setDisplayValue = _useState16[1];
   var isOptionsArray = Array.isArray(options) && !optionsUrl;
   var hasMoreRef = useRef(true);
   var effectiveReadOnly = Boolean(readOnly);
   var applyEnabled = typeof onApply === 'function';
-  var _useState15 = useState(false),
-    _useState16 = _slicedToArray$d(_useState15, 2),
-    showRequiredError = _useState16[0],
-    setShowRequiredError = _useState16[1];
+  var _useState17 = useState(false),
+    _useState18 = _slicedToArray$d(_useState17, 2),
+    showRequiredError = _useState18[0],
+    setShowRequiredError = _useState18[1];
   var hasSelection = Array.isArray(selectedOptions) && selectedOptions.length > 0;
   var isError = Boolean(invalid || status === 'error' || showRequiredError);
   var isInvalidEffective = Boolean(isError && !hasSelection);
@@ -42217,6 +42444,94 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
       return observer.disconnect();
     };
   }, [enableItemTooltip]);
+
+  // --- Détection de la place autour du composant / panel ---
+  useEffect(function () {
+    if (!enableItemTooltip) return undefined;
+    var computeMode = function computeMode() {
+      var container = containerRef.current;
+      if (!container) return;
+      var cRect = container.getBoundingClientRect();
+      var tooltipPxWidth = parseInt(String(tooltipWidth), 10) || 220;
+      var spaceRight = window.innerWidth - cRect.right;
+      if (spaceRight >= tooltipPxWidth + 40) {
+        setTooltipMode('right');
+        return;
+      }
+      var panel = document.querySelector('.p-multiselect-panel.p-component');
+      var anchor = panel || container;
+      var aRect = anchor.getBoundingClientRect();
+      var estimateHeight = 120;
+      var spaceBottom = window.innerHeight - aRect.bottom;
+      var spaceTop = aRect.top;
+      if (spaceBottom >= estimateHeight + 16) {
+        setTooltipMode('panelBottom');
+      } else if (spaceTop >= estimateHeight + 16) {
+        setTooltipMode('panelTop');
+      } else {
+        setTooltipMode('panelBottom');
+      }
+    };
+    computeMode();
+    window.addEventListener('resize', computeMode);
+    window.addEventListener('scroll', computeMode, true);
+    return function () {
+      window.removeEventListener('resize', computeMode);
+      window.removeEventListener('scroll', computeMode, true);
+    };
+  }, [enableItemTooltip, tooltipWidth]);
+
+  // --- Repositionnement fin du tooltip ---
+  useEffect(function () {
+    if (!enableItemTooltip) return undefined;
+    var hoveredRow = null;
+    var reposition = function reposition() {
+      var tooltipEl = document.querySelector('.p-tooltip.p-component');
+      if (!tooltipEl) return;
+      var arrowEl = tooltipEl.querySelector('.p-tooltip-arrow');
+      if (tooltipMode === 'right') {
+        var _hoveredRow;
+        var iconEl = (_hoveredRow = hoveredRow) === null || _hoveredRow === void 0 ? void 0 : _hoveredRow.querySelector('.multiselect-item-info-icon');
+        if (!iconEl) return;
+        var iconRect = iconEl.getBoundingClientRect();
+        var tt = tooltipEl.getBoundingClientRect();
+        tooltipEl.style.top = "".concat(iconRect.top + iconRect.height / 2 - tt.height / 2 + window.scrollY, "px");
+        tooltipEl.style.left = "".concat(iconRect.right + 12 + window.scrollX, "px");
+        if (arrowEl) {
+          arrowEl.style.display = '';
+          arrowEl.style.top = '50%';
+          arrowEl.style.marginTop = '-0.25rem';
+        }
+      } else {
+        var panel = document.querySelector('.p-multiselect-panel.p-component');
+        if (!panel) return;
+        var pRect = panel.getBoundingClientRect();
+        var _tt = tooltipEl.getBoundingClientRect();
+        if (tooltipMode === 'panelBottom') {
+          tooltipEl.style.top = "".concat(pRect.bottom + 8 + window.scrollY, "px");
+        } else {
+          tooltipEl.style.top = "".concat(pRect.top - _tt.height - 8 + window.scrollY, "px");
+        }
+        tooltipEl.style.left = "".concat(pRect.left + window.scrollX, "px");
+        if (arrowEl) arrowEl.style.display = 'none';
+      }
+    };
+    var trackHover = function trackHover(e) {
+      var _e$target, _e$target$closest;
+      var row = (_e$target = e.target) === null || _e$target === void 0 || (_e$target$closest = _e$target.closest) === null || _e$target$closest === void 0 ? void 0 : _e$target$closest.call(_e$target, '.multiselect-tooltip-item, .multiselect-tooltip-trigger, .multiselect-selected-tooltip-trigger');
+      if (row) {
+        hoveredRow = row;
+        requestAnimationFrame(reposition);
+        requestAnimationFrame(function () {
+          return requestAnimationFrame(reposition);
+        });
+      }
+    };
+    document.addEventListener('mouseover', trackHover);
+    return function () {
+      return document.removeEventListener('mouseover', trackHover);
+    };
+  }, [enableItemTooltip, tooltipMode]);
   var inverseColor = function inverseColor(hexColor) {
     if (!hexColor || !hexColor.startsWith('#')) return '#000000';
     var hex = hexColor;
@@ -42891,11 +43206,20 @@ var MultiSelectMetaAsync = function MultiSelectMetaAsync(_ref) {
     key: tooltipKey,
     target: ".multiselect-tooltip-item, .multiselect-tooltip-trigger, .multiselect-selected-tooltip-trigger",
     appendTo: document.body,
-    position: "top",
+    position: "right",
     autoHide: false,
     hideDelay: 150,
     style: {
       zIndex: '9999999'
+    },
+    pt: {
+      text: {
+        style: {
+          width: tooltipWidth,
+          maxWidth: tooltipWidth,
+          whiteSpace: 'normal'
+        }
+      }
     }
   }), /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -43236,6 +43560,8 @@ var MultiSelect = function MultiSelect(props) {
     enableGroupSelect = _props$enableGroupSel === void 0 ? false : _props$enableGroupSel,
     _props$enableItemTool = props.enableItemTooltip,
     enableItemTooltip = _props$enableItemTool === void 0 ? false : _props$enableItemTool,
+    _props$tooltipWidth = props.tooltipWidth,
+    tooltipWidth = _props$tooltipWidth === void 0 ? '220px' : _props$tooltipWidth,
     _props$enableItemLink = props.enableItemLink,
     enableItemLink = _props$enableItemLink === void 0 ? false : _props$enableItemLink,
     _props$openOnHover = props.openOnHover,
@@ -43289,17 +43615,24 @@ var MultiSelect = function MultiSelect(props) {
     _useState0 = _slicedToArray$d(_useState9, 2),
     tooltipKey = _useState0[0],
     setTooltipKey = _useState0[1];
+  // 'right' : flèche du tooltip sur le picto i
+  // 'panelBottom' : tooltip sous le panel d'options
+  // 'panelTop' : tooltip au-dessus du panel d'options
+  var _useState1 = useState('right'),
+    _useState10 = _slicedToArray$d(_useState1, 2),
+    tooltipMode = _useState10[0],
+    setTooltipMode = _useState10[1];
   var multiSelectRef = useRef(null);
   var containerRef = useRef(null);
   var didMountRef = useRef(false);
-  var _useState1 = useState(null),
-    _useState10 = _slicedToArray$d(_useState1, 2),
-    sortOrder = _useState10[0],
-    setSortOrder = _useState10[1];
-  var _useState11 = useState([]),
+  var _useState11 = useState(null),
     _useState12 = _slicedToArray$d(_useState11, 2),
-    collapsedGroups = _useState12[0],
-    setCollapsedGroups = _useState12[1];
+    sortOrder = _useState12[0],
+    setSortOrder = _useState12[1];
+  var _useState13 = useState([]),
+    _useState14 = _slicedToArray$d(_useState13, 2),
+    collapsedGroups = _useState14[0],
+    setCollapsedGroups = _useState14[1];
   useEffect(function () {
     if (!didMountRef.current) {
       didMountRef.current = true;
@@ -43743,6 +44076,99 @@ var MultiSelect = function MultiSelect(props) {
       return observer.disconnect();
     };
   }, [enableItemTooltip]);
+
+  // --- Détection de la place autour du composant / panel ---
+  // Priorité 1 : à droite du picto i (mode 'right')
+  // Priorité 2 : sous le panel d'options (mode 'panelBottom')
+  // Priorité 3 : au-dessus du panel d'options (mode 'panelTop')
+  useEffect(function () {
+    if (!enableItemTooltip) return undefined;
+    var computeMode = function computeMode() {
+      var container = containerRef.current;
+      if (!container) return;
+      var cRect = container.getBoundingClientRect();
+      var tooltipPxWidth = parseInt(String(tooltipWidth), 10) || 220;
+      var spaceRight = window.innerWidth - cRect.right;
+      if (spaceRight >= tooltipPxWidth + 40) {
+        setTooltipMode('right');
+        return;
+      }
+      var panel = document.querySelector('.p-multiselect-panel.p-component');
+      var anchor = panel || container;
+      var aRect = anchor.getBoundingClientRect();
+      var estimateHeight = 120;
+      var spaceBottom = window.innerHeight - aRect.bottom;
+      var spaceTop = aRect.top;
+      if (spaceBottom >= estimateHeight + 16) {
+        setTooltipMode('panelBottom');
+      } else if (spaceTop >= estimateHeight + 16) {
+        setTooltipMode('panelTop');
+      } else {
+        setTooltipMode('panelBottom');
+      }
+    };
+    computeMode();
+    window.addEventListener('resize', computeMode);
+    window.addEventListener('scroll', computeMode, true);
+    return function () {
+      window.removeEventListener('resize', computeMode);
+      window.removeEventListener('scroll', computeMode, true);
+    };
+  }, [enableItemTooltip, tooltipWidth]);
+
+  // --- Repositionnement fin du tooltip ---
+  // Mode 'right' : la flèche pointe précisément sur le picto i survolé.
+  // Modes 'panelBottom' / 'panelTop' : tooltip unique ancré sous / au-dessus du panel.
+  useEffect(function () {
+    if (!enableItemTooltip) return undefined;
+    var hoveredRow = null;
+    var reposition = function reposition() {
+      var tooltipEl = document.querySelector('.p-tooltip.p-component');
+      if (!tooltipEl) return;
+      var arrowEl = tooltipEl.querySelector('.p-tooltip-arrow');
+      if (tooltipMode === 'right') {
+        var _hoveredRow;
+        var iconEl = (_hoveredRow = hoveredRow) === null || _hoveredRow === void 0 ? void 0 : _hoveredRow.querySelector('.multiselect-item-info-icon');
+        if (!iconEl) return;
+        var iconRect = iconEl.getBoundingClientRect();
+        var tt = tooltipEl.getBoundingClientRect();
+        tooltipEl.style.top = "".concat(iconRect.top + iconRect.height / 2 - tt.height / 2 + window.scrollY, "px");
+        tooltipEl.style.left = "".concat(iconRect.right + 12 + window.scrollX, "px");
+        if (arrowEl) {
+          arrowEl.style.display = '';
+          arrowEl.style.top = '50%';
+          arrowEl.style.marginTop = '-0.25rem';
+        }
+      } else {
+        var panel = document.querySelector('.p-multiselect-panel.p-component');
+        if (!panel) return;
+        var pRect = panel.getBoundingClientRect();
+        var _tt = tooltipEl.getBoundingClientRect();
+        if (tooltipMode === 'panelBottom') {
+          tooltipEl.style.top = "".concat(pRect.bottom + 8 + window.scrollY, "px");
+        } else {
+          tooltipEl.style.top = "".concat(pRect.top - _tt.height - 8 + window.scrollY, "px");
+        }
+        tooltipEl.style.left = "".concat(pRect.left + window.scrollX, "px");
+        if (arrowEl) arrowEl.style.display = 'none';
+      }
+    };
+    var trackHover = function trackHover(e) {
+      var _e$target, _e$target$closest;
+      var row = (_e$target = e.target) === null || _e$target === void 0 || (_e$target$closest = _e$target.closest) === null || _e$target$closest === void 0 ? void 0 : _e$target$closest.call(_e$target, '.multiselect-tooltip-item, .multiselect-tooltip-trigger, .multiselect-selected-tooltip-trigger');
+      if (row) {
+        hoveredRow = row;
+        requestAnimationFrame(reposition);
+        requestAnimationFrame(function () {
+          return requestAnimationFrame(reposition);
+        });
+      }
+    };
+    document.addEventListener('mouseover', trackHover);
+    return function () {
+      return document.removeEventListener('mouseover', trackHover);
+    };
+  }, [enableItemTooltip, tooltipMode]);
   var handleChange = function handleChange(e) {
     if (disabled || effectiveReadOnly) return;
     var ids = Array.isArray(e.value) ? e.value : [e.value];
@@ -44197,11 +44623,20 @@ var MultiSelect = function MultiSelect(props) {
     key: tooltipKey,
     target: ".multiselect-tooltip-item, .multiselect-tooltip-trigger, .multiselect-selected-tooltip-trigger",
     appendTo: document.body,
-    position: "top",
+    position: "right",
     autoHide: false,
     hideDelay: 150,
     style: {
       zIndex: '9999999'
+    },
+    pt: {
+      text: {
+        style: {
+          width: tooltipWidth,
+          maxWidth: tooltipWidth,
+          whiteSpace: 'normal'
+        }
+      }
     }
   }), /*#__PURE__*/React__default.createElement("div", {
     style: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "arengibook",
   "private": false,
-  "version": "3.1.51-itemWithTooltip",
+  "version": "3.1.52-itemWithTooltip",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "exports": {