Remplace les composants tooltip par le composant du DS

app.territoiresentransitions.react/src/app/Layout/Header/SelectCollectivite.tsx

@@ -3,7 +3,7 @@ import {makeCollectiviteAccueilUrl} from 'app/paths';
 import {Link} from 'react-router-dom';
 import {BadgeNiveauAcces} from './BadgeNiveauAcces';
 import {HeaderPropsWithModalState} from './types';
-import {Tooltip} from 'ui/shared/floating-ui/Tooltip';
+import {Tooltip} from '@tet/ui';
 
 const ID = 'SelectCollectivite';
 
@@ -33,7 +33,7 @@ export const SelectCollectivite = (props: HeaderPropsWithModalState) => {
   return (
     <ul className="fr-nav__list" data-test={ID}>
       <li className="fr-nav__item !relative">
-        <Tooltip label={currentCollectivite.nom}>
+        <Tooltip label={currentCollectivite.nom} withArrow={false}>
           <button
             className={classNames(
               {

app.territoiresentransitions.react/src/app/pages/collectivite/EtatDesLieux/Referentiel/SuiviAction/SubActionHeader.tsx

@@ -5,14 +5,15 @@ import {
   ActionStatusDropdown,
   StatusToSavePayload,
 } from 'ui/referentiels/ActionStatusDropdown';
-import {InfoTooltip} from 'ui/shared/floating-ui/InfoTooltip';
 import ScoreDisplay from 'ui/referentiels/ScoreDisplay';
 import ActionProgressBar from 'ui/referentiels/ActionProgressBar';
 import {SuiviScoreRow} from '../data/useScoreRealise';
 import {ActionCommentaire} from 'ui/shared/actions/ActionCommentaire';
 import {ExpandToggle} from 'ui/icons/ExpandToggle';
 import ActionJustification from 'app/pages/collectivite/EtatDesLieux/Referentiel/SuiviAction/ActionJustification';
 import {TActionAvancement} from 'types/alias';
+import {InfoTooltip} from '@tet/ui';
+import DOMPurify from 'dompurify';
 
 type SubActionHeaderProps = {
   action: ActionDefinitionSummary;
@@ -82,7 +83,18 @@ const SubActionHeader = ({
           {action.nom}
           {action.description &&
             ((isSubAction && action.referentiel === 'cae') || isTask) && (
-              <InfoTooltip label={action.description} />
+              <InfoTooltip
+                label={
+                  <div
+                    className="max-w-sm font-normal"
+                    dangerouslySetInnerHTML={{
+                      __html: DOMPurify.sanitize(action.description),
+                    }}
+                  />
+                }
+                activatedBy="click"
+                iconClassName="ml-2"
+              />
             )}
         </div>
 

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/detail/IndicateurValueTableRow.tsx

@@ -1,6 +1,5 @@
 import classNames from 'classnames';
 import ThreeDotMenu from 'ui/shared/select/ThreeDotMenu';
-import {InfoTooltip} from 'ui/shared/floating-ui/InfoTooltip';
 import Modal from 'ui/shared/floating-ui/Modal';
 import Textarea from 'ui/shared/form/Textarea';
 import {
@@ -14,8 +13,7 @@ import {
   TUseTableRowStateArgs,
   useTableRowState,
 } from './useTableRowState';
-import DSTetTooltip from 'ui/shared/floating-ui/DSTetTooltip';
-import {Notification} from '@tet/ui';
+import {InfoTooltip, Notification, Tooltip} from '@tet/ui';
 
 const PLACEHOLDER = 'Écrire ici...';
 const OPTIONS = [
@@ -74,14 +72,13 @@ export const IndicateurValueTableRow = ({
       <tr>
         <td className="relative">
           {confidentiel && (
-            <DSTetTooltip
-              className="min-w-max"
-              label={() => <p>Le résultat est en mode privé</p>}
+            <Tooltip
+              label={<p className="min-w-max">Le résultat est en mode privé</p>}
             >
               <div className="absolute top-3 -left-5">
                 <Notification icon="lock-fill" />
               </div>
-            </DSTetTooltip>
+            </Tooltip>
           )}
         </td>
         <td>
@@ -158,13 +155,13 @@ const ValueImported = ({valeur}: {valeur: string}) => {
     <>
       <span className="text-grey-6 font-bold w-fit">{v}</span>
       <InfoTooltip
-        label={() => (
+        label={
           <span>
             Cette valeur est renseignée <b>automatiquement</b>. Pour toute
             question, l’équipe est à votre écoute sur
             [email protected] !
           </span>
-        )}
+        }
       />
     </>
   );

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/detail/IndicateurValuesTabs.tsx

@@ -1,13 +1,13 @@
 import {useEffect} from 'react';
 import {Tab, Tabs, useActiveTab} from 'ui/shared/Tabs';
 import ToggleButton from 'ui/shared/designSystem/ToggleButton';
-import DSTetTooltip from 'ui/shared/floating-ui/DSTetTooltip';
 import {TIndicateurDefinition} from '../types';
 import {SOURCE_COLLECTIVITE} from '../constants';
 import {useCurrentCollectivite} from 'core-logic/hooks/useCurrentCollectivite';
 import {IndicateurValuesTable} from './IndicateurValuesTable';
 import {useToggleIndicateurConfidentiel} from './useToggleIndicateurConfidentiel';
 import {useIndicateurInfoLiees} from './useIndicateurInfoLiees';
+import {Tooltip} from '@tet/ui';
 
 /** Affiche les onglets résultats/objectifs */
 export const IndicateurValuesTabs = ({
@@ -37,16 +37,12 @@ export const IndicateurValuesTabs = ({
   return (
     <>
       {!isReadonly && (
-        <DSTetTooltip
-          label={() => (
-            <p>
-              Si le mode privé est activé, le résultat le plus récent n'est plus
-              consultable par les personnes n’étant pas membres de votre
-              collectivité. Seuls les autres résultats restent accessibles pour
-              tous les utilisateurs et la valeur privée reste consultable par
-              l’ADEME et le service support de la plateforme.
-            </p>
-          )}
+        <Tooltip
+          label={`Si le mode privé est activé, le résultat le plus récent n'est plus 
+            consultable par les personnes n’étant pas membres de votre 
+            collectivité. Seuls les autres résultats restent accessibles pour 
+            tous les utilisateurs et la valeur privée reste consultable par 
+            l’ADEME et le service support de la plateforme.`}
         >
           <ToggleButton
             className="my-10"
@@ -55,7 +51,7 @@ export const IndicateurValuesTabs = ({
             disabled={isLoading}
             onClick={() => toggleIndicateurConfidentiel(confidentiel || false)}
           />
-        </DSTetTooltip>
+        </Tooltip>
       )}
       <Tabs defaultActiveTab={activeTab} onChange={onChangeTab}>
         <Tab label="Résultats" icon="checkbox">

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/lists/FiltresIndicateurs.tsx

@@ -1,13 +1,12 @@
 import {useState} from 'react';
 import {AccordionControlled} from 'ui/Accordion';
-import {Checkbox, Field} from '@tet/ui';
+import {Checkbox, Field, InfoTooltip} from '@tet/ui';
 import {IndicateurViewParamOption} from 'app/paths';
 import {UseFilterState} from './useIndicateursFilterState';
 import FiltreServices from './FiltreServices';
 import FiltrePlans from './FiltrePlans';
 import FiltreComplet from './FiltreComplet';
 import {UiSearchBar} from 'ui/UiSearchBar';
-import {InfoTooltip} from 'ui/shared/floating-ui/InfoTooltip';
 import ThematiquesDropdown from 'ui/dropdownLists/ThematiquesDropdown/ThematiquesDropdown';
 import PersonnesDropdown from 'ui/dropdownLists/PersonnesDropdown/PersonnesDropdown';
 import {getPersonneStringId} from 'ui/dropdownLists/PersonnesDropdown/utils';
@@ -121,7 +120,7 @@ export const FiltresIndicateurs = (props: FiltresIndicateursProps) => {
                 />
 
                 {view === 'cae' && (
-                  <div className="flex flex-row">
+                  <div className="flex flex-row items-center">
                     <Checkbox
                       label="Participe au score"
                       checked={participation_score?.includes('oui') || false}
@@ -133,12 +132,9 @@ export const FiltresIndicateurs = (props: FiltresIndicateursProps) => {
                       }
                     />
                     <InfoTooltip
-                      label={() => (
-                        <p>
-                          Indicateur dont les résultats conditionnent certains
-                          points dans le référentiel CAE
-                        </p>
-                      )}
+                      label="Indicateur dont les résultats conditionnent certains points dans le référentiel CAE"
+                      activatedBy="click"
+                      iconClassName="ml-2 -mb-0.5"
                     />
                   </div>
                 )}

app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/FicheAction/FicheActionHeader/FicheActionHeader.tsx

@@ -6,8 +6,8 @@ import {usePlanActionProfondeur} from '../../PlanAction/data/usePlanActionProfon
 import FicheActionRangerModal from '../FicheActionRangerModal/FicheActionRangerModal';
 import {useExportFicheAction} from '../data/useExportFicheAction';
 import ToggleButton from 'ui/shared/designSystem/ToggleButton';
-import DSTetTooltip from 'ui/shared/floating-ui/DSTetTooltip';
 import {useEditFicheAction} from '../data/useUpsertFicheAction';
+import {Tooltip} from '@tet/ui';
 
 type TFicheActionHeader = {
   fiche: FicheAction;
@@ -37,9 +37,9 @@ const FicheActionHeader = ({fiche, isReadonly}: TFicheActionHeader) => {
       {!isReadonly && (
         <div className="mb-6 flex items-center justify-end gap-4">
           <div className="mr-auto">
-            <DSTetTooltip
-              label={() => (
-                <p>
+            <Tooltip
+              label={
+                <p className="w-96">
                   Si le mode privé est activé la fiche action n'est plus
                   consultable par les personnes n’étant pas membres de votre
                   collectivité.
@@ -48,7 +48,7 @@ const FicheActionHeader = ({fiche, isReadonly}: TFicheActionHeader) => {
                   La fiche reste consultable par l’ADEME et le service support
                   de la plateforme.
                 </p>
-              )}
+              }
             >
               <ToggleButton
                 data-test="FicheToggleConfidentialite"
@@ -58,7 +58,7 @@ const FicheActionHeader = ({fiche, isReadonly}: TFicheActionHeader) => {
                 }
                 description="Fiche action en mode privé"
               />
-            </DSTetTooltip>
+            </Tooltip>
           </div>
           {plansProfondeur?.plans && plansProfondeur.plans.length > 0 && (
             <FicheActionRangerModal

app.territoiresentransitions.react/src/app/pages/collectivite/PlansActions/PlanAction/PlanActionHeader/Actions.tsx

@@ -1,6 +1,5 @@
 import classNames from 'classnames';
 
-import DSTetTooltip from 'ui/shared/floating-ui/DSTetTooltip';
 import SmallIconContextMenu from 'app/pages/collectivite/PlansActions/PlanAction/PlanActionHeader/SmallIconContextMenu';
 import IconUnlockFill from 'ui/shared/designSystem/icons/IconUnlockFill';
 import IconLockFill from 'ui/shared/designSystem/icons/IconLockFill';
@@ -16,6 +15,7 @@ import {PlanNode} from '../data/types';
 import {useExportPlanAction} from '../data/useExportPlanAction';
 import ModifierPlanModale from './ModifierPlanModale';
 import {TPlanType} from 'types/alias';
+import {Tooltip} from '@tet/ui';
 
 const EXPORT_OPTIONS = [
   {value: 'xlsx', label: 'Format Excel (.xlsx)'},
@@ -100,11 +100,9 @@ const Actions = ({
               className="p-2 bg-white hover:bg-primary-1 rounded-lg"
               disabled={!axeHasFiches}
             >
-              <DSTetTooltip
+              <Tooltip
                 placement="bottom"
-                label={() => (
-                  <span>Rendre publiques l'ensemble des fiches du plan</span>
-                )}
+                label="Rendre publiques l'ensemble des fiches du plan"
               >
                 <div>
                   <IconUnlockFill
@@ -113,7 +111,7 @@ const Actions = ({
                     })}
                   />
                 </div>
-              </DSTetTooltip>
+              </Tooltip>
             </button>
           </RestreindreFichesModal>
           <RestreindreFichesModal planId={plan.id} axes={axes} restreindre>
@@ -122,11 +120,9 @@ const Actions = ({
               className="p-2 bg-white hover:bg-primary-1 rounded-lg"
               disabled={!axeHasFiches}
             >
-              <DSTetTooltip
+              <Tooltip
                 placement="bottom"
-                label={() => (
-                  <span>Rendre privées l'ensemble des fiches du plan</span>
-                )}
+                label="Rendre privées l'ensemble des fiches du plan"
               >
                 <div>
                   <IconLockFill
@@ -135,7 +131,7 @@ const Actions = ({
                     })}
                   />
                 </div>
-              </DSTetTooltip>
+              </Tooltip>
             </button>
           </RestreindreFichesModal>
         </>

app.territoiresentransitions.react/src/app/pages/collectivite/ReferentielTable/CellAction.tsx

@@ -2,8 +2,8 @@ import {CellProps} from 'react-table';
 import {Link} from 'react-router-dom';
 import {makeCollectiviteTacheUrl, ReferentielParamOption} from 'app/paths';
 import {ActionReferentiel} from './useReferentiel';
-import {Tooltip} from 'ui/shared/floating-ui/Tooltip';
 import {Kbd} from 'ui/shared/Kbd';
+import {Tooltip} from '@tet/ui';
 
 export type TCellProps = CellProps<ActionReferentiel> & {
   collectiviteId: number | null;
@@ -106,15 +106,15 @@ export const CellAction = (props: TCellProps) => {
 };
 
 // infobulles
-const infoReplier = () => (
-  <p>
+const infoReplier = (
+  <p className="font-normal">
     Cliquer pour replier (tenir <Kbd>⇧ SHIFT</Kbd> enfoncé
     <br />
     pour replier toutes les lignes de même niveau)
   </p>
 );
-const infoDeplier = () => (
-  <p>
+const infoDeplier = (
+  <p className="font-normal">
     Cliquer pour déplier (tenir <Kbd>⇧ SHIFT</Kbd> enfoncé pour déplier
     <br />
     toutes les lignes de même niveau de l'axe, ou tenir

app.territoiresentransitions.react/src/ui/labellisation/LabellisationStars.tsx

@@ -1,8 +1,8 @@
-import {Tooltip} from 'ui/shared/floating-ui/Tooltip';
 import {NIVEAUX} from './getNiveauInfo';
 import {GreyStar, RedStar} from './Star';
 import {TLabellisationParcours} from '../../app/pages/collectivite/ParcoursLabellisation/types';
 import {toLocaleFixed} from 'utils/toFixed';
+import {Tooltip} from '@tet/ui';
 
 type LabellisationStarsProps = {
   parcours: TLabellisationParcours | null;
@@ -15,7 +15,7 @@ const LabellisationStars = ({parcours}: LabellisationStarsProps) => {
 
   return (
     <Tooltip
-      label={() =>
+      label={
         etoiles === 1 ? (
           <p>
             Reconnaissance obtenue

app.territoiresentransitions.react/src/ui/referentiels/ActionStatusDropdown.tsx

@@ -24,8 +24,8 @@ import {
   statutParAvancement,
 } from './utils';
 import {SuiviScoreRow} from 'app/pages/collectivite/EtatDesLieux/Referentiel/data/useScoreRealise';
-import {Tooltip} from 'ui/shared/floating-ui/Tooltip';
 import classNames from 'classnames';
+import {Tooltip} from '@tet/ui';
 
 export type StatusToSavePayload = {
   actionId: string;
@@ -245,10 +245,14 @@ export const ActionStatusDropdown = ({
       {/* Dropdown avec suppression de l'option "non renseigné" sur les sous-actions 
       quand au moins une des tâches a un statut */}
       <Tooltip
-        label="Le score a été ajusté manuellement à la sous-action : la
-        modification du statut de la tâche ne sera pas pris en compte pour
-        le score."
-        delay={0}
+        label={
+          <p className="w-96">
+            Le score a été ajusté manuellement à la sous-action : la
+            modification du statut de la tâche ne sera pas pris en compte pour
+            le score.
+          </p>
+        }
+        openingDelay={0}
         className={classNames({hidden: !statusWarningMessage})}
       >
         <div>