From: Jeremy Davis <jeremy.davis@sonarsource.com>
Date: Wed, 22 May 2024 10:12:50 +0000 (+0200)
Subject: SONAR-22218 Rename props to match the new API
X-Git-Tag: 10.6.0.92116~92
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=42537a47960b55f568297ba2140a3b2919b017df;p=sonarqube.git

SONAR-22218 Rename props to match the new API
---

diff --git a/server/sonar-web/design-system/src/components/Breadcrumbs.tsx b/server/sonar-web/design-system/src/components/Breadcrumbs.tsx
index bb30a36052b..5d981c9ce65 100644
--- a/server/sonar-web/design-system/src/components/Breadcrumbs.tsx
+++ b/server/sonar-web/design-system/src/components/Breadcrumbs.tsx
@@ -117,9 +117,9 @@ export function Breadcrumbs(props: Props) {
       if (isLastBreadcrumb && breadcrumbSize > maxWidth) {
         onlyVisibleBreadcrumbs.push(
           <Tooltip
-            key={modifiedChildren[index].key}
             // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
-            overlay={modifiedChildren[index].props.children as React.ReactNode}
+            content={modifiedChildren[index].props.children as React.ReactNode}
+            key={modifiedChildren[index].key}
           >
             {modifiedChildren[index]}
           </Tooltip>,
diff --git a/server/sonar-web/design-system/src/components/BubbleChart.tsx b/server/sonar-web/design-system/src/components/BubbleChart.tsx
index 61bdbd22b86..108527dbb93 100644
--- a/server/sonar-web/design-system/src/components/BubbleChart.tsx
+++ b/server/sonar-web/design-system/src/components/BubbleChart.tsx
@@ -365,7 +365,7 @@ export function BubbleChart<T>(props: BubbleChartProps<T>) {
   return (
     <div>
       <div className="sw-flex sw-items-center sw-justify-end sw-h-control sw-mb-4">
-        <Tooltip overlay={zoomTooltipText}>
+        <Tooltip content={zoomTooltipText}>
           <span>
             <Note className="sw-body-sm-highlight">{zoomLabel}</Note>
             {': '}
@@ -423,7 +423,7 @@ function Bubble<T>(props: BubbleProps<T>) {
     </a>
   );
 
-  return <Tooltip overlay={tooltip}>{circle}</Tooltip>;
+  return <Tooltip content={tooltip}>{circle}</Tooltip>;
 }
 
 const BubbleStyled = styled.circle`
diff --git a/server/sonar-web/design-system/src/components/ColorsLegend.tsx b/server/sonar-web/design-system/src/components/ColorsLegend.tsx
index 19abcdc298b..43f7c415241 100644
--- a/server/sonar-web/design-system/src/components/ColorsLegend.tsx
+++ b/server/sonar-web/design-system/src/components/ColorsLegend.tsx
@@ -49,7 +49,7 @@ export function ColorsLegend(props: ColorLegendProps) {
     <ColorsLegendWrapper className={className}>
       {colors.map((color, idx) => (
         <li className="sw-ml-4" key={color.value}>
-          <Tooltip overlay={color.overlay}>
+          <Tooltip content={color.overlay}>
             <div>
               <Checkbox
                 checked={color.selected}
diff --git a/server/sonar-web/design-system/src/components/DropdownMenu.tsx b/server/sonar-web/design-system/src/components/DropdownMenu.tsx
index 162b11f9c0b..335f28f434e 100644
--- a/server/sonar-web/design-system/src/components/DropdownMenu.tsx
+++ b/server/sonar-web/design-system/src/components/DropdownMenu.tsx
@@ -213,7 +213,7 @@ export function ItemCopy(props: ItemCopyProps) {
   return (
     <ClipboardBase>
       {({ setCopyButton, copySuccess }) => (
-        <Tooltip overlay={tooltipOverlay} visible={copySuccess}>
+        <Tooltip content={tooltipOverlay} visible={copySuccess}>
           <li role="none">
             <ItemButtonStyled
               className={className}
diff --git a/server/sonar-web/design-system/src/components/FacetBox.tsx b/server/sonar-web/design-system/src/components/FacetBox.tsx
index 8b13dc4cac8..792eb273123 100644
--- a/server/sonar-web/design-system/src/components/FacetBox.tsx
+++ b/server/sonar-web/design-system/src/components/FacetBox.tsx
@@ -50,7 +50,7 @@ export interface FacetBoxProps {
   onClear?: () => void;
   onClick?: (isOpen: boolean) => void;
   open?: boolean;
-  tooltipComponent?: React.ComponentType<React.PropsWithChildren<{ overlay: React.ReactNode }>>;
+  tooltipComponent?: React.ComponentType<React.PropsWithChildren<{ content: React.ReactNode }>>;
 }
 
 export function FacetBox(props: FacetBoxProps) {
@@ -105,7 +105,7 @@ export function FacetBox(props: FacetBoxProps) {
           {expandable && <OpenCloseIndicator aria-hidden open={open} />}
 
           {disabled ? (
-            <Tooltip overlay={disabledHelper}>
+            <Tooltip content={disabledHelper}>
               <HeaderTitle
                 aria-disabled
                 aria-label={`${name}, ${disabledHelper ?? ''}`}
@@ -130,7 +130,7 @@ export function FacetBox(props: FacetBoxProps) {
             </Badge>
 
             {Boolean(clearable) && (
-              <Tooltip overlay={clearIconLabel}>
+              <Tooltip content={clearIconLabel}>
                 <ClearIcon
                   Icon={CloseIcon}
                   aria-label={clearIconLabel ?? ''}
diff --git a/server/sonar-web/design-system/src/components/FavoriteButton.tsx b/server/sonar-web/design-system/src/components/FavoriteButton.tsx
index 5782c37de92..ef31b04fcb7 100644
--- a/server/sonar-web/design-system/src/components/FavoriteButton.tsx
+++ b/server/sonar-web/design-system/src/components/FavoriteButton.tsx
@@ -28,7 +28,7 @@ interface Props {
   innerRef?: React.Ref<HTMLButtonElement>;
   overlay: string;
   toggleFavorite: VoidFunction;
-  tooltip?: React.ComponentType<React.PropsWithChildren<{ overlay: React.ReactNode }>>;
+  tooltip?: React.ComponentType<React.PropsWithChildren<{ content: React.ReactNode }>>;
 }
 
 export function FavoriteButton(props: Props) {
@@ -36,7 +36,7 @@ export function FavoriteButton(props: Props) {
   const Tooltip = tooltip ?? React.Fragment;
 
   return (
-    <Tooltip overlay={overlay}>
+    <Tooltip content={overlay}>
       <InteractiveIcon
         Icon={favorite ? StarFillIcon : StarIcon}
         aria-label={overlay}
diff --git a/server/sonar-web/design-system/src/components/Histogram.tsx b/server/sonar-web/design-system/src/components/Histogram.tsx
index 197cc263d28..b054114ef41 100644
--- a/server/sonar-web/design-system/src/components/Histogram.tsx
+++ b/server/sonar-web/design-system/src/components/Histogram.tsx
@@ -67,7 +67,7 @@ export class Histogram extends React.PureComponent<Props> {
     const y = Math.round((yScale(index) ?? 0) + yScale.bandwidth() / 2 + BAR_HEIGHT / 2);
 
     return (
-      <Tooltip overlay={this.props.yTooltips && this.props.yTooltips[index]}>
+      <Tooltip content={this.props.yTooltips && this.props.yTooltips[index]}>
         <HistogramTick dx="1em" dy="0.3em" textAnchor="start" x={x} y={y}>
           {value}
         </HistogramTick>
diff --git a/server/sonar-web/design-system/src/components/NavBarTabs.tsx b/server/sonar-web/design-system/src/components/NavBarTabs.tsx
index ab3286ec0cf..590cb913605 100644
--- a/server/sonar-web/design-system/src/components/NavBarTabs.tsx
+++ b/server/sonar-web/design-system/src/components/NavBarTabs.tsx
@@ -75,7 +75,7 @@ export function NavBarTabLink(props: NavBarTabLinkProps) {
 export function DisabledTabLink(props: { label: string; overlay: React.ReactNode }) {
   return (
     <NavBarTabLinkWrapper>
-      <Tooltip overlay={props.overlay}>
+      <Tooltip content={props.overlay}>
         <a aria-disabled="true" className="disabled-link" role="link">
           {props.label}
         </a>
diff --git a/server/sonar-web/design-system/src/components/Tags.tsx b/server/sonar-web/design-system/src/components/Tags.tsx
index 3444f6af034..9fd333135b6 100644
--- a/server/sonar-web/design-system/src/components/Tags.tsx
+++ b/server/sonar-web/design-system/src/components/Tags.tsx
@@ -40,7 +40,7 @@ interface Props {
   tags: string[];
   tagsClassName?: string;
   tagsToDisplay?: number;
-  tooltip?: React.ComponentType<React.PropsWithChildren<{ overlay: React.ReactNode }>>;
+  tooltip?: React.ComponentType<React.PropsWithChildren<{ content: React.ReactNode }>>;
 }
 
 export function Tags({
@@ -63,7 +63,7 @@ export function Tags({
   const Tooltip = tooltip || React.Fragment;
 
   const displayedTagsContent = (open = false) => (
-    <Tooltip overlay={open ? undefined : tags.join(', ')}>
+    <Tooltip content={open ? undefined : tags.join(', ')}>
       <span className="sw-inline-flex sw-items-center sw-gap-1">
         {/* Display first 3 (tagsToDisplay) tags */}
         {displayedTags.map((tag) => (
diff --git a/server/sonar-web/design-system/src/components/Tooltip.tsx b/server/sonar-web/design-system/src/components/Tooltip.tsx
index 053c54d9033..bf17f07979f 100644
--- a/server/sonar-web/design-system/src/components/Tooltip.tsx
+++ b/server/sonar-web/design-system/src/components/Tooltip.tsx
@@ -37,11 +37,11 @@ const MILLISECONDS_IN_A_SECOND = 1000;
 
 interface TooltipProps {
   children: React.ReactElement;
+  content: React.ReactNode;
   mouseEnterDelay?: number;
   mouseLeaveDelay?: number;
   onHide?: VoidFunction;
   onShow?: VoidFunction;
-  overlay: React.ReactNode;
   placement?: BasePlacement;
   visible?: boolean;
 }
@@ -84,7 +84,7 @@ export function Tooltip(props: TooltipProps) {
   // overlay is a ReactNode, so it can be a boolean, `undefined` or `null`
   // this allows to easily render a tooltip conditionally
   // more generaly we avoid rendering empty tooltips
-  return props.overlay ? <TooltipInner {...props}>{props.children}</TooltipInner> : props.children;
+  return props.content ? <TooltipInner {...props}>{props.children}</TooltipInner> : props.children;
 }
 
 export class TooltipInner extends React.Component<TooltipProps, State> {
@@ -404,7 +404,7 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
               role="tooltip"
               style={style}
             >
-              <TooltipWrapperInner>{this.props.overlay}</TooltipWrapperInner>
+              <TooltipWrapperInner>{this.props.content}</TooltipWrapperInner>
               <TooltipWrapperArrow
                 style={
                   isMeasured(this.state)
diff --git a/server/sonar-web/design-system/src/components/TreeMapRect.tsx b/server/sonar-web/design-system/src/components/TreeMapRect.tsx
index 066d861f1c6..45ece8b7fe5 100644
--- a/server/sonar-web/design-system/src/components/TreeMapRect.tsx
+++ b/server/sonar-web/design-system/src/components/TreeMapRect.tsx
@@ -83,7 +83,7 @@ export function TreeMapRect(props: Props) {
   const isIconVisible = width >= ICON_VISIBLE_AT_WIDTH && height >= ICON_VISIBLE_AT_HEIGHT;
 
   return (
-    <Tooltip overlay={tooltip} placement={placement ?? PopupPlacement.Left}>
+    <Tooltip content={tooltip} placement={placement ?? PopupPlacement.Left}>
       <StyledCell style={cellStyles}>
         <StyledCellLink href="#" onClick={handleRectClick}>
           <StyledCellLabel width={width}>
diff --git a/server/sonar-web/design-system/src/components/__tests__/DropdownMenu-test.tsx b/server/sonar-web/design-system/src/components/__tests__/DropdownMenu-test.tsx
index 5e2aebceb65..8f855b319b2 100644
--- a/server/sonar-web/design-system/src/components/__tests__/DropdownMenu-test.tsx
+++ b/server/sonar-web/design-system/src/components/__tests__/DropdownMenu-test.tsx
@@ -43,7 +43,7 @@ it('should render a full menu correctly', () => {
 
 it('menu items should work with tooltips', async () => {
   render(
-    <Tooltip overlay="test tooltip">
+    <Tooltip content="test tooltip">
       <ItemButton onClick={jest.fn()}>button</ItemButton>
     </Tooltip>,
     {},
diff --git a/server/sonar-web/design-system/src/components/__tests__/Tooltip-test.tsx b/server/sonar-web/design-system/src/components/__tests__/Tooltip-test.tsx
index 487d1bbf5cf..2d0882b1c3f 100644
--- a/server/sonar-web/design-system/src/components/__tests__/Tooltip-test.tsx
+++ b/server/sonar-web/design-system/src/components/__tests__/Tooltip-test.tsx
@@ -96,7 +96,7 @@ describe('TooltipInner', () => {
     children = <div role="note" />,
   ) {
     return render(
-      <TooltipInner mouseLeaveDelay={0} overlay={<span id="overlay" />} {...props}>
+      <TooltipInner content={<span id="overlay" />} mouseLeaveDelay={0} {...props}>
         {children}
       </TooltipInner>,
     );
@@ -105,19 +105,19 @@ describe('TooltipInner', () => {
 
 describe('Tooltip', () => {
   it('should not render tooltip without overlay', async () => {
-    const { user } = setupWithProps({ overlay: undefined });
+    const { user } = setupWithProps({ content: undefined });
     await user.hover(screen.getByRole('note'));
     expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
   });
 
   it('should not render undefined tooltips', async () => {
-    const { user } = setupWithProps({ overlay: undefined, visible: true });
+    const { user } = setupWithProps({ content: undefined, visible: true });
     await user.hover(screen.getByRole('note'));
     expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
   });
 
   it('should not render empty tooltips', async () => {
-    const { user } = setupWithProps({ overlay: '', visible: true });
+    const { user } = setupWithProps({ content: '', visible: true });
     await user.hover(screen.getByRole('note'));
     expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
   });
@@ -127,7 +127,7 @@ describe('Tooltip', () => {
     children = <div role="note" />,
   ) {
     return render(
-      <Tooltip overlay={<span id="overlay" />} {...props}>
+      <Tooltip content={<span id="overlay" />} {...props}>
         {children}
       </Tooltip>,
     );
diff --git a/server/sonar-web/design-system/src/components/clipboard.tsx b/server/sonar-web/design-system/src/components/clipboard.tsx
index a5c30188f6b..ffe88b4a045 100644
--- a/server/sonar-web/design-system/src/components/clipboard.tsx
+++ b/server/sonar-web/design-system/src/components/clipboard.tsx
@@ -116,12 +116,12 @@ export function ClipboardButton({
   return (
     <ClipboardBase>
       {({ setCopyButton, copySuccess }) => (
-        <Tooltip overlay={copiedLabel} visible={copySuccess}>
+        <Tooltip content={copiedLabel} visible={copySuccess}>
           <ButtonSecondary
             className={classNames('sw-select-none', className)}
             data-clipboard-text={copyValue}
             icon={icon}
-            innerRef={setCopyButton}
+            ref={setCopyButton}
           >
             {children ?? copyLabel}
           </ButtonSecondary>
@@ -159,12 +159,12 @@ export function ClipboardIconButton(props: IconButtonProps) {
       {({ setCopyButton, copySuccess }) => {
         return (
           <Tooltip
-            mouseEnterDelay={INTERACTIVE_TOOLTIP_DELAY}
-            overlay={
+            content={
               <div className="sw-w-abs-150 sw-text-center">
                 {copySuccess ? copiedLabel : copyLabel}
               </div>
             }
+            mouseEnterDelay={INTERACTIVE_TOOLTIP_DELAY}
             {...(copySuccess ? { visible: copySuccess } : undefined)}
           >
             <InteractiveIconComponent
diff --git a/server/sonar-web/design-system/src/components/code-line/LineCoverage.tsx b/server/sonar-web/design-system/src/components/code-line/LineCoverage.tsx
index 718c040d874..35e60f2a6b2 100644
--- a/server/sonar-web/design-system/src/components/code-line/LineCoverage.tsx
+++ b/server/sonar-web/design-system/src/components/code-line/LineCoverage.tsx
@@ -50,7 +50,7 @@ function LineCoverageFunc({ lineNumber, coverageStatus, status, scrollToUncovere
   }
 
   return (
-    <Tooltip overlay={status} placement={PopupPlacement.Right}>
+    <Tooltip content={status} placement={PopupPlacement.Right}>
       <LineMeta data-line-number={lineNumber} ref={coverageMarker}>
         {coverageStatus === 'covered' && <CoveredBlock aria-label={status} />}
         {coverageStatus === 'uncovered' && <UncoveredBlock aria-label={status} />}
diff --git a/server/sonar-web/design-system/src/components/input/MultiSelectMenuOption.tsx b/server/sonar-web/design-system/src/components/input/MultiSelectMenuOption.tsx
index 2df004a3c6a..2336dd914a3 100644
--- a/server/sonar-web/design-system/src/components/input/MultiSelectMenuOption.tsx
+++ b/server/sonar-web/design-system/src/components/input/MultiSelectMenuOption.tsx
@@ -56,7 +56,7 @@ export function MultiSelectMenuOption(props: MultiSelectOptionProps) {
   const label = renderLabel(element);
 
   return (
-    <Tooltip overlay={renderTooltip?.(element, disabled)} placement={PopupPlacement.Right}>
+    <Tooltip content={renderTooltip?.(element, disabled)} placement={PopupPlacement.Right}>
       <ItemCheckbox
         checked={Boolean(selected)}
         className={classNames('sw-flex sw-py-2 sw-px-4', { active })}
diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonPrimary.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonPrimary.tsx
index a3355135482..8931442ebc9 100644
--- a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonPrimary.tsx
+++ b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonPrimary.tsx
@@ -21,7 +21,7 @@ import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../../helpers';
 import { ThemedProps } from '../../../types';
-import { Button, ButtonProps } from './Button';
+import { Button } from './Button';
 
 export const PrimaryStyle = (props: ThemedProps) => css`
   --background: ${themeColor('button')(props)};
@@ -31,6 +31,6 @@ export const PrimaryStyle = (props: ThemedProps) => css`
   --border: ${themeBorder('default', 'transparent')(props)};
 `;
 
-export const ButtonPrimary: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)`
+export const ButtonPrimary = styled(Button)`
   ${PrimaryStyle}
 `;
diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonSecondary.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonSecondary.tsx
index 3ee6c5f2892..f513c5f803a 100644
--- a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonSecondary.tsx
+++ b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ButtonSecondary.tsx
@@ -19,9 +19,9 @@
  */
 import styled from '@emotion/styled';
 import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../../helpers';
-import { Button, ButtonProps } from './Button';
+import { Button } from './Button';
 
-export const ButtonSecondary: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)`
+export const ButtonSecondary = styled(Button)`
   --background: ${themeColor('buttonSecondary')};
   --backgroundHover: ${themeColor('buttonSecondaryHover')};
   --color: ${themeContrast('buttonSecondary')};
diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonPrimary.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonPrimary.tsx
index b0770cdfce1..ca701d8944e 100644
--- a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonPrimary.tsx
+++ b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonPrimary.tsx
@@ -19,9 +19,9 @@
  */
 import styled from '@emotion/styled';
 import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../../helpers';
-import { Button, ButtonProps } from './Button';
+import { Button } from './Button';
 
-export const DangerButtonPrimary: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)`
+export const DangerButtonPrimary = styled(Button)`
   --background: ${themeColor('dangerButton')};
   --backgroundHover: ${themeColor('dangerButtonHover')};
   --color: ${themeContrast('dangerButton')};
diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonSecondary.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonSecondary.tsx
index 8815ab12de9..81cfc90010b 100644
--- a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonSecondary.tsx
+++ b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/DangerButtonSecondary.tsx
@@ -19,9 +19,9 @@
  */
 import styled from '@emotion/styled';
 import { OPACITY_20_PERCENT, themeBorder, themeColor, themeContrast } from '../../../helpers';
-import { Button, ButtonProps } from './Button';
+import { Button } from './Button';
 
-export const DangerButtonSecondary: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)`
+export const DangerButtonSecondary = styled(Button)`
   --background: ${themeColor('dangerButtonSecondary')};
   --backgroundHover: ${themeColor('dangerButtonSecondaryHover')};
   --color: ${themeContrast('dangerButtonSecondary')};
diff --git a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ThirdPartyButton.tsx b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ThirdPartyButton.tsx
index 9239e4ab209..afc27b57f1c 100644
--- a/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ThirdPartyButton.tsx
+++ b/server/sonar-web/design-system/src/sonar-aligned/components/buttons/ThirdPartyButton.tsx
@@ -18,7 +18,6 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 import styled from '@emotion/styled';
-import React from 'react';
 import { OPACITY_20_PERCENT } from '../../../helpers/constants';
 import { themeBorder, themeColor, themeContrast } from '../../../helpers/theme';
 import { Button, ButtonProps } from './Button';
@@ -43,7 +42,7 @@ export function ThirdPartyButton({
   );
 }
 
-const ThirdPartyButtonStyled: React.FC<React.PropsWithChildren<ButtonProps>> = styled(Button)`
+const ThirdPartyButtonStyled = styled(Button)`
   --background: ${themeColor('thirdPartyButton')};
   --backgroundHover: ${themeColor('thirdPartyButtonHover')};
   --color: ${themeContrast('thirdPartyButton')};
diff --git a/server/sonar-web/src/main/js/app/components/global-search/GlobalSearch.tsx b/server/sonar-web/src/main/js/app/components/global-search/GlobalSearch.tsx
index 7e849acf4ea..22f2a8856b3 100644
--- a/server/sonar-web/src/main/js/app/components/global-search/GlobalSearch.tsx
+++ b/server/sonar-web/src/main/js/app/components/global-search/GlobalSearch.tsx
@@ -420,7 +420,7 @@ export class GlobalSearch extends React.PureComponent<Props, State> {
     return (
       <form role="search">
         {!open && !query ? (
-          <Tooltip mouseEnterDelay={INTERACTIVE_TOOLTIP_DELAY} overlay={translate('search_verb')}>
+          <Tooltip mouseEnterDelay={INTERACTIVE_TOOLTIP_DELAY} content={translate('search_verb')}>
             <InteractiveIcon
               className="it__search-icon"
               Icon={MenuSearchIcon}
diff --git a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavUser.tsx b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavUser.tsx
index 66317b37ccc..e9d95f3a2bf 100644
--- a/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavUser.tsx
+++ b/server/sonar-web/src/main/js/app/components/nav/global/GlobalNavUser.tsx
@@ -69,7 +69,7 @@ export function GlobalNavUser() {
       {({ a11yAttrs: { role, ...a11yAttrs }, onToggleClick, open }) => (
         <Tooltip
           mouseEnterDelay={0.2}
-          overlay={!open ? translate('global_nav.account.tooltip') : undefined}
+          content={!open ? translate('global_nav.account.tooltip') : undefined}
         >
           <BareButton
             aria-label={translate('global_nav.account.tooltip')}
diff --git a/server/sonar-web/src/main/js/apps/account/projects/ProjectCard.tsx b/server/sonar-web/src/main/js/apps/account/projects/ProjectCard.tsx
index a2279d8b632..c528eaf085a 100644
--- a/server/sonar-web/src/main/js/apps/account/projects/ProjectCard.tsx
+++ b/server/sonar-web/src/main/js/apps/account/projects/ProjectCard.tsx
@@ -77,7 +77,7 @@ export default function ProjectCard({ project }: Readonly<Props>) {
 
         {project.qualityGate !== undefined && (
           <div>
-            <Tooltip overlay={qualityGateLabel}>
+            <Tooltip content={qualityGateLabel}>
               <span className="sw-flex sw-items-center">
                 <QualityGateIndicator
                   status={(project.qualityGate as Status) ?? 'NONE'}
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingCount.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingCount.tsx
index c04ec1b0f03..129f1d84c68 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingCount.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/StatPendingCount.tsx
@@ -50,7 +50,7 @@ function StatPendingCount({ appState, onCancelAllPending, pendingCount }: Readon
           onConfirm={onCancelAllPending}
         >
           {({ onClick }) => (
-            <Tooltip overlay={translate('background_tasks.cancel_all_tasks')}>
+            <Tooltip content={translate('background_tasks.cancel_all_tasks')}>
               <DestructiveIcon
                 aria-label={translate('background_tasks.cancel_all_tasks')}
                 className="sw-ml-1"
diff --git a/server/sonar-web/src/main/js/apps/background-tasks/components/Workers.tsx b/server/sonar-web/src/main/js/apps/background-tasks/components/Workers.tsx
index cfab3673035..5f51fe69c0c 100644
--- a/server/sonar-web/src/main/js/apps/background-tasks/components/Workers.tsx
+++ b/server/sonar-web/src/main/js/apps/background-tasks/components/Workers.tsx
@@ -92,7 +92,7 @@ export default class Workers extends React.PureComponent<{}, State> {
     return (
       <div className="sw-flex sw-items-center">
         {!loading && workerCount > 1 && (
-          <Tooltip overlay={translate('background_tasks.number_of_workers.warning')}>
+          <Tooltip content={translate('background_tasks.number_of_workers.warning')}>
             <div className="sw-py-1/2 sw-mr-1">
               <FlagWarningIcon />
             </div>
@@ -108,7 +108,7 @@ export default class Workers extends React.PureComponent<{}, State> {
         </Spinner>
 
         {!loading && canSetWorkerCount && (
-          <Tooltip overlay={translate('background_tasks.change_number_of_workers')}>
+          <Tooltip content={translate('background_tasks.change_number_of_workers')}>
             <InteractiveIcon
               Icon={PencilIcon}
               aria-label={translate('background_tasks.change_number_of_workers')}
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/BulkChange.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/BulkChange.tsx
index 83d32a57f15..9eb641e5e1c 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/BulkChange.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/BulkChange.tsx
@@ -80,7 +80,7 @@ export default class BulkChange extends React.PureComponent<Props, State> {
     );
     if (!canBulkChange) {
       return (
-        <Tooltip overlay={translate('coding_rules.can_not_bulk_change')}>
+        <Tooltip content={translate('coding_rules.can_not_bulk_change')}>
           <ButtonPrimary disabled>{translate('bulk_change')}</ButtonPrimary>
         </Tooltip>
       );
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderMeta.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderMeta.tsx
index 846377823dd..f89b77de11b 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderMeta.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsHeaderMeta.tsx
@@ -43,7 +43,7 @@ export default function RuleDetailsHeaderMeta(props: Readonly<Props>) {
       {!ruleDetails.isExternal && ruleDetails.isTemplate && (
         <>
           <li>
-            <Tooltip overlay={translate('coding_rules.rule_template.title')}>
+            <Tooltip content={translate('coding_rules.rule_template.title')}>
               <span className="it__coding-rules-detail-property">
                 {translate('coding_rules.rule_template')}
               </span>
@@ -117,7 +117,7 @@ export default function RuleDetailsHeaderMeta(props: Readonly<Props>) {
           <SeparatorCircleIcon aria-hidden as="li" />
           <li>
             <Tooltip
-              overlay={translateWithParameters(
+              content={translateWithParameters(
                 'coding_rules.external_rule.engine_tooltip',
                 externalEngine,
               )}
@@ -141,7 +141,7 @@ export default function RuleDetailsHeaderMeta(props: Readonly<Props>) {
         <>
           <SeparatorCircleIcon aria-hidden as="li" />
           <li>
-            <Tooltip overlay={translate('status')}>
+            <Tooltip content={translate('status')}>
               <Note data-meta="status">
                 <Badge variant="deleted">{translate('rules.status', ruleDetails.status)}</Badge>
               </Note>
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsIssues.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsIssues.tsx
index c09f2c8b9c0..a4080ff26ee 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsIssues.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleDetailsIssues.tsx
@@ -155,7 +155,7 @@ export class RuleDetailsIssues extends React.PureComponent<Props, State> {
     }
 
     return (
-      <Tooltip overlay={translate('coding_rules.issues.only_main_branches')}>{totalItem}</Tooltip>
+      <Tooltip content={translate('coding_rules.issues.only_main_branches')}>{totalItem}</Tooltip>
     );
   };
 
diff --git a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
index 394220d35a6..81aba54fac1 100644
--- a/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
+++ b/server/sonar-web/src/main/js/apps/coding-rules/components/RuleListItem.tsx
@@ -107,7 +107,7 @@ export default class RuleListItem extends React.PureComponent<Props> {
       <div className="sw-mr-2 sw-shrink-0">
         {activation.inherit === 'OVERRIDES' && (
           <Tooltip
-            overlay={translateWithParameters(
+            content={translateWithParameters(
               'coding_rules.overrides',
               selectedProfile.name,
               selectedProfile.parentName,
@@ -118,7 +118,7 @@ export default class RuleListItem extends React.PureComponent<Props> {
         )}
         {activation.inherit === 'INHERITED' && (
           <Tooltip
-            overlay={translateWithParameters(
+            content={translateWithParameters(
               'coding_rules.inherits',
               selectedProfile.name,
               selectedProfile.parentName,
@@ -142,7 +142,7 @@ export default class RuleListItem extends React.PureComponent<Props> {
     if (selectedProfile.isBuiltIn && canCopy) {
       return (
         <div className="sw-ml-4">
-          <Tooltip overlay={translate('coding_rules.need_extend_or_copy')}>
+          <Tooltip content={translate('coding_rules.need_extend_or_copy')}>
             <DangerButtonSecondary disabled>
               {translate('coding_rules', activation ? 'deactivate' : 'activate')}
             </DangerButtonSecondary>
@@ -173,7 +173,7 @@ export default class RuleListItem extends React.PureComponent<Props> {
               )}
             </ConfirmButton>
           ) : (
-            <Tooltip overlay={translate('coding_rules.can_not_deactivate')}>
+            <Tooltip content={translate('coding_rules.can_not_deactivate')}>
               <DangerButtonSecondary disabled>
                 {translate('coding_rules.deactivate')}
               </DangerButtonSecondary>
@@ -271,7 +271,7 @@ export default class RuleListItem extends React.PureComponent<Props> {
                 <>
                   <SeparatorCircleIcon aria-hidden as="li" />
                   <li>
-                    <Tooltip overlay={translate('coding_rules.rule_template.title')}>
+                    <Tooltip content={translate('coding_rules.rule_template.title')}>
                       <span>
                         <Badge>{translate('coding_rules.rule_template')}</Badge>
                       </span>
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/LeakPeriodLegend.tsx b/server/sonar-web/src/main/js/apps/component-measures/components/LeakPeriodLegend.tsx
index 34492842e8e..4fb5f846278 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/LeakPeriodLegend.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/LeakPeriodLegend.tsx
@@ -86,7 +86,7 @@ class LeakPeriodLegend extends React.PureComponent<LeakPeriodLegendProps & Wrapp
       </div>
     );
 
-    return <Tooltip overlay={tooltip}>{label}</Tooltip>;
+    return <Tooltip content={tooltip}>{label}</Tooltip>;
   }
 }
 
diff --git a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.tsx b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.tsx
index aaed001569c..59bea826a71 100644
--- a/server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/component-measures/components/MeasureHeader.tsx
@@ -72,7 +72,7 @@ export default function MeasureHeader(props: Readonly<Props>) {
           </div>
 
           {!isDiff && hasHistory && (
-            <Tooltip overlay={translate('component_measures.show_metric_history')}>
+            <Tooltip content={translate('component_measures.show_metric_history')}>
               <span className="sw-ml-4">
                 <LinkStandalone
                   className="it__show-history-link sw-font-semibold"
diff --git a/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectSelectionForm.tsx b/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectSelectionForm.tsx
index 9484caabda8..b5b5d2cedd0 100644
--- a/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectSelectionForm.tsx
+++ b/server/sonar-web/src/main/js/apps/create/project/Gitlab/GitlabProjectSelectionForm.tsx
@@ -100,12 +100,12 @@ export default function GitlabProjectSelectionForm(
               sqProjectKey={project.sqProjectKey}
               onImport={props.onImport}
               primaryTextNode={
-                <Tooltip overlay={project.slug}>
+                <Tooltip content={project.slug}>
                   <span>{project.name}</span>
                 </Tooltip>
               }
               secondaryTextNode={
-                <Tooltip overlay={project.pathSlug}>
+                <Tooltip content={project.pathSlug}>
                   <span>{project.pathName}</span>
                 </Tooltip>
               }
diff --git a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
index f4925ec2e62..3ba705f36a2 100644
--- a/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
+++ b/server/sonar-web/src/main/js/apps/issues/components/IssuesApp.tsx
@@ -965,7 +965,7 @@ export class App extends React.PureComponent<Props, State> {
         <ButtonSecondary
           disabled={checked.length === 0}
           id="issues-bulk-change"
-          innerRef={this.bulkButtonRef}
+          ref={this.bulkButtonRef}
           onClick={this.handleOpenBulkChange}
         >
           {this.getButtonLabel(checked, checkAll, paging)}
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginActions.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginActions.tsx
index b0ea8e15593..1a4d7c0b87c 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginActions.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginActions.tsx
@@ -149,7 +149,7 @@ export default class PluginActions extends React.PureComponent<Props, State> {
                 />
               </div>
             ))}
-            <Tooltip overlay={translate('marketplace.requires_restart')}>
+            <Tooltip content={translate('marketplace.requires_restart')}>
               <DangerButtonSecondary disabled={loading} onClick={this.handleUninstall}>
                 {translate('marketplace.uninstall')}
               </DangerButtonSecondary>
@@ -157,7 +157,7 @@ export default class PluginActions extends React.PureComponent<Props, State> {
           </>
         )}
         {isAvailablePlugin(plugin) && (
-          <Tooltip overlay={translate('marketplace.requires_restart')}>
+          <Tooltip content={translate('marketplace.requires_restart')}>
             <ButtonSecondary
               disabled={
                 loading || (plugin.termsAndConditionsUrl != null && !this.state.acceptTerms)
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginChangeLogItem.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginChangeLogItem.tsx
index 1775cf6aebc..8e63e555798 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginChangeLogItem.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginChangeLogItem.tsx
@@ -38,7 +38,7 @@ export default function PluginChangeLogItem({ release, update }: Props) {
             {release.version}
           </Badge>
         ) : (
-          <Tooltip overlay={translate('marketplace.update_status', update.status)}>
+          <Tooltip content={translate('marketplace.update_status', update.status)}>
             <span>
               <Badge className="sw-mr-4">{release.version}</Badge>
             </span>
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginLicense.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginLicense.tsx
index aa5ac6ccacb..67def352cc2 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginLicense.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginLicense.tsx
@@ -33,7 +33,7 @@ export default function PluginLicense({ license }: Readonly<Props>) {
   }
   return (
     <ListItem>
-      <Tooltip overlay={license}>
+      <Tooltip content={license}>
         <div>
           <FormattedMessage
             id="marketplace.licensed_under_x"
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginUpdateButton.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginUpdateButton.tsx
index bfa202e0daf..d25f34030e5 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginUpdateButton.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginUpdateButton.tsx
@@ -40,7 +40,7 @@ export default function PluginUpdateButton(props: Readonly<Props>) {
     return null;
   }
   return (
-    <Tooltip overlay={translate('marketplace.requires_restart')}>
+    <Tooltip content={translate('marketplace.requires_restart')}>
       <ButtonSecondary disabled={disabled} onClick={handleClick}>
         {translateWithParameters('marketplace.update_to_x', update.release.version)}
       </ButtonSecondary>
diff --git a/server/sonar-web/src/main/js/apps/marketplace/components/PluginUpdateItem.tsx b/server/sonar-web/src/main/js/apps/marketplace/components/PluginUpdateItem.tsx
index 9c6923f8bb2..fe90b7b6a9d 100644
--- a/server/sonar-web/src/main/js/apps/marketplace/components/PluginUpdateItem.tsx
+++ b/server/sonar-web/src/main/js/apps/marketplace/components/PluginUpdateItem.tsx
@@ -37,7 +37,7 @@ export default function PluginUpdateItem({ release, update, pluginName }: Readon
         {update.status === 'COMPATIBLE' ? (
           <Badge variant="new">{release.version}</Badge>
         ) : (
-          <Tooltip overlay={translate('marketplace.update_status', update.status)}>
+          <Tooltip content={translate('marketplace.update_status', update.status)}>
             <span>
               <Badge>{release.version}</Badge>
             </span>
diff --git a/server/sonar-web/src/main/js/apps/overview/branches/BranchMetaTopBar.tsx b/server/sonar-web/src/main/js/apps/overview/branches/BranchMetaTopBar.tsx
index 61ec2cbf3bc..bd55e0a1313 100644
--- a/server/sonar-web/src/main/js/apps/overview/branches/BranchMetaTopBar.tsx
+++ b/server/sonar-web/src/main/js/apps/overview/branches/BranchMetaTopBar.tsx
@@ -78,7 +78,7 @@ export default function BranchMetaTopBar({
       <HomePageSelect currentPage={currentPage} type="button" />
       <ComponentReportActions component={component} branch={branch} />
       {showTakeTheTourButton && (
-        <Tooltip overlay={translate('overview.promoted_section.button_tooltip')}>
+        <Tooltip content={translate('overview.promoted_section.button_tooltip')}>
           <ButtonSecondary
             className="sw-pl-4 sw-shrink-0"
             data-spotlight-id="take-tour-1"
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/Event.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/Event.tsx
index 3dac2d41bde..418cc66b740 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/Event.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/Event.tsx
@@ -52,7 +52,7 @@ function Event(props: Readonly<EventProps>) {
       {showActions && (
         <div className="sw-grow-0 sw-shrink-0 sw-ml-2">
           {canChange && (
-            <Tooltip overlay={translate('project_activity.events.tooltip.edit')}>
+            <Tooltip content={translate('project_activity.events.tooltip.edit')}>
               <InteractiveIcon
                 Icon={PencilIcon}
                 aria-label={translate('project_activity.events.tooltip.edit')}
@@ -64,7 +64,7 @@ function Event(props: Readonly<EventProps>) {
             </Tooltip>
           )}
           {canDelete && (
-            <Tooltip overlay={translate('project_activity.events.tooltip.delete')}>
+            <Tooltip content={translate('project_activity.events.tooltip.delete')}>
               <DestructiveIcon
                 Icon={TrashIcon}
                 aria-label={translate('project_activity.events.tooltip.delete')}
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.tsx
index 59d0ede66e8..4afc148e25b 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysesList.tsx
@@ -159,8 +159,8 @@ export default class ProjectActivityAnalysesList extends React.PureComponent<Pro
                 {translate('project_activity.new_code_period_start')}
               </span>
               <Tooltip
-                overlay={translate('project_activity.new_code_period_start.help')}
-                placement="top"
+                content={translate('project_activity.new_code_period_start.help')}
+                side="top"
               >
                 <HelperHintIcon className="sw-ml-1" />
               </Tooltip>
@@ -186,7 +186,7 @@ export default class ProjectActivityAnalysesList extends React.PureComponent<Pro
                 >
                   <Tooltip
                     mouseEnterDelay={0.5}
-                    overlay={`${translate('version')} ${version.version}`}
+                    content={`${translate('version')} ${version.version}`}
                   >
                     <Badge className="sw-p-1">{version.version}</Badge>
                   </Tooltip>
diff --git a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.tsx b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.tsx
index 27223214eee..9d9ef2d832e 100644
--- a/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.tsx
+++ b/server/sonar-web/src/main/js/apps/projectActivity/components/ProjectActivityAnalysis.tsx
@@ -101,7 +101,7 @@ function ProjectActivityAnalysis(props: ProjectActivityAnalysisProps) {
 
   return (
     <>
-      <Tooltip mouseEnterDelay={0.5} overlay={tooltipContent} placement="left">
+      <Tooltip mouseEnterDelay={0.5} content={tooltipContent} side="left">
         <ActivityAnalysisListItem
           className={classNames(
             'it__project-activity-analysis sw-flex sw-cursor-pointer sw-p-1 sw-relative',
@@ -205,10 +205,7 @@ function ProjectActivityAnalysis(props: ProjectActivityAnalysisProps) {
           <span className="sw-py-1/2 sw-px-1">
             {translate('project_activity.new_code_period_start')}
           </span>
-          <Tooltip
-            overlay={translate('project_activity.new_code_period_start.help')}
-            placement="top"
-          >
+          <Tooltip content={translate('project_activity.new_code_period_start.help')} side="top">
             <HelperHintIcon className="sw-ml-1" />
           </Tooltip>
         </BaselineMarker>
diff --git a/server/sonar-web/src/main/js/apps/projectInformation/about/components/MetaQualityProfiles.tsx b/server/sonar-web/src/main/js/apps/projectInformation/about/components/MetaQualityProfiles.tsx
index dc94c4d0417..103b591e188 100644
--- a/server/sonar-web/src/main/js/apps/projectInformation/about/components/MetaQualityProfiles.tsx
+++ b/server/sonar-web/src/main/js/apps/projectInformation/about/components/MetaQualityProfiles.tsx
@@ -99,7 +99,7 @@ function ProfileItem({
           {profile.deleted ? (
             <Tooltip
               key={profile.key}
-              overlay={translateWithParameters('overview.deleted_profile', profile.name)}
+              content={translateWithParameters('overview.deleted_profile', profile.name)}
             >
               <div className="project-info-deleted-profile">{profile.name}</div>
             </Tooltip>
@@ -119,7 +119,7 @@ function ProfileItem({
               {count > 0 && (
                 <Tooltip
                   key={profile.key}
-                  overlay={translateWithParameters('overview.deprecated_profile', count)}
+                  content={translateWithParameters('overview.deprecated_profile', count)}
                 >
                   <span className="sw-ml-6">
                     <Badge variant="deleted">{translate('deprecated')}</Badge>
diff --git a/server/sonar-web/src/main/js/apps/projectNewCode/components/BranchListRow.tsx b/server/sonar-web/src/main/js/apps/projectNewCode/components/BranchListRow.tsx
index 8d0b663ed8b..79709380d55 100644
--- a/server/sonar-web/src/main/js/apps/projectNewCode/components/BranchListRow.tsx
+++ b/server/sonar-web/src/main/js/apps/projectNewCode/components/BranchListRow.tsx
@@ -117,7 +117,7 @@ export default function BranchListRow(props: BranchListRowProps) {
         {branch.isMain && <Badge className="sw-ml-1">{translate('branches.main_branch')}</Badge>}
       </ContentCell>
       <ContentCell>
-        <Tooltip overlay={settingWarning}>
+        <Tooltip content={settingWarning}>
           <span>
             {settingWarning !== undefined && <FlagWarningIcon className="sw-mr-1" />}
             {branch.newCodePeriod
@@ -143,7 +143,7 @@ export default function BranchListRow(props: BranchListRowProps) {
             ariaLabel={translateWithParameters('branch_list.show_actions_for_x', branch.name)}
           >
             <Tooltip
-              overlay={
+              content={
                 isCompliant ? null : translate('project_baseline.compliance.warning.title.project')
               }
             >
diff --git a/server/sonar-web/src/main/js/apps/projectNewCode/components/NewCodeDefinitionSettingReferenceBranch.tsx b/server/sonar-web/src/main/js/apps/projectNewCode/components/NewCodeDefinitionSettingReferenceBranch.tsx
index e3135885d33..76fa8185cc5 100644
--- a/server/sonar-web/src/main/js/apps/projectNewCode/components/NewCodeDefinitionSettingReferenceBranch.tsx
+++ b/server/sonar-web/src/main/js/apps/projectNewCode/components/NewCodeDefinitionSettingReferenceBranch.tsx
@@ -56,7 +56,7 @@ function renderBranchOption(props: OptionProps<BranchOption, false>) {
     <components.Option {...props}>
       {option.isInvalid ? (
         <Tooltip
-          overlay={translateWithParameters(
+          content={translateWithParameters(
             'baseline.reference_branch.does_not_exist',
             option.value,
           )}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx
index 4f939c92d32..7320eb30c82 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/PageHeader.tsx
@@ -58,7 +58,7 @@ export default function PageHeader(props: Props) {
       </div>
       <div className="sw-flex sw-justify-between">
         <div className="sw-flex sw-flex-1">
-          <Tooltip overlay={translate('projects.search')}>
+          <Tooltip content={translate('projects.search')}>
             <InputSearch
               className="sw-mr-4 it__page-header-search sw-max-w-abs-300 sw-flex-1"
               minLength={MIN_SEARCH_QUERY_LENGTH}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx
index a148fc75137..41e106aab5f 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectsSortingSelect.tsx
@@ -117,7 +117,7 @@ export default class ProjectsSortingSelect extends React.PureComponent<Props> {
         />
         <Tooltip
           mouseLeaveDelay={1}
-          overlay={
+          content={
             sortDesc ? translate('projects.sort_descending') : translate('projects.sort_ascending')
           }
         >
diff --git a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.tsx b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.tsx
index 9a2b27300cb..d2e64fd1476 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCard.tsx
@@ -99,7 +99,7 @@ function renderFirstLine(
 
           {qualifier === ComponentQualifier.Application && (
             <Tooltip
-              overlay={
+              content={
                 <span>
                   {translate('qualifier.APP')}
                   {measures.projects !== '' && (
@@ -117,14 +117,14 @@ function renderFirstLine(
             </Tooltip>
           )}
 
-          <Tooltip overlay={translate('visibility', visibility, 'description', qualifier)}>
+          <Tooltip content={translate('visibility', visibility, 'description', qualifier)}>
             <span>
               <Badge className="sw-ml-2">{translate('visibility', visibility)}</Badge>
             </span>
           </Tooltip>
 
           {awaitingScan && !isNewCode && !isEmpty(analysisDate) && measures.ncloc !== undefined && (
-            <Tooltip overlay={translate(`projects.awaiting_scan.description.${qualifier}`)}>
+            <Tooltip content={translate(`projects.awaiting_scan.description.${qualifier}`)}>
               <span>
                 <Badge variant="new" className="sw-ml-2">
                   {translate('projects.awaiting_scan')}
@@ -135,7 +135,7 @@ function renderFirstLine(
         </div>
 
         {isDefined(analysisDate) && analysisDate !== '' && (
-          <Tooltip overlay={qualityGateLabel}>
+          <Tooltip content={qualityGateLabel}>
             <span className="sw-flex sw-items-center">
               <QualityGateIndicator
                 status={(measures[MetricKey.alert_status] as Status) ?? 'NONE'}
diff --git a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardLanguages.tsx b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardLanguages.tsx
index 8217c74c95a..a1596b0caff 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardLanguages.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/project-card/ProjectCardLanguages.tsx
@@ -59,7 +59,7 @@ export function ProjectCardLanguages({ className, distribution, languages }: Pro
     ) : null;
 
   return (
-    <Tooltip overlay={tooltip}>
+    <Tooltip content={tooltip}>
       <span className={className}>{languagesText}</span>
     </Tooltip>
   );
diff --git a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx
index 915cea83100..8be3a04d3d5 100644
--- a/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx
+++ b/server/sonar-web/src/main/js/apps/projectsManagement/ProjectRow.tsx
@@ -61,7 +61,7 @@ export default function ProjectRow(props: Readonly<Props>) {
           highlight={LinkHighlight.CurrentColor}
           to={getComponentOverviewUrl(project.key, project.qualifier)}
         >
-          <Tooltip overlay={project.name} placement="left">
+          <Tooltip content={project.name} side="left">
             <span>{project.name}</span>
           </Tooltip>
         </LinkStandalone>
@@ -73,7 +73,7 @@ export default function ProjectRow(props: Readonly<Props>) {
         <PrivacyBadgeContainer qualifier={project.qualifier} visibility={project.visibility} />
       </ContentCell>
       <ContentCell className="it__project-row-text-cell">
-        <Tooltip overlay={project.key} placement="left">
+        <Tooltip content={project.key} side="left">
           <Note>{project.key}</Note>
         </Tooltip>
       </ContentCell>
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/BuiltInQualityGateBadge.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/BuiltInQualityGateBadge.tsx
index c3c91ffbec5..0df69ce9ad4 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/BuiltInQualityGateBadge.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/BuiltInQualityGateBadge.tsx
@@ -28,7 +28,7 @@ interface Props {
 
 export default function BuiltInQualityGateBadge({ className }: Props) {
   return (
-    <Tooltip overlay={translate('quality_gates.built_in.help')}>
+    <Tooltip content={translate('quality_gates.built_in.help')}>
       <Badge className={className}>{translate('quality_gates.built_in')}</Badge>
     </Tooltip>
   );
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsHeader.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsHeader.tsx
index c55952d85d1..8087e5f2d42 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/DetailsHeader.tsx
@@ -82,7 +82,7 @@ export default function DetailsHeader({ qualityGate }: Readonly<Props>) {
             )}
             {actions.copy && (
               <Tooltip
-                overlay={
+                content={
                   qualityGate.caycStatus === CaycStatus.NonCompliant
                     ? translate('quality_gates.cannot_copy_no_cayc')
                     : null
@@ -98,7 +98,7 @@ export default function DetailsHeader({ qualityGate }: Readonly<Props>) {
             )}
             {actions.setAsDefault && (
               <Tooltip
-                overlay={
+                content={
                   qualityGate.caycStatus === CaycStatus.NonCompliant
                     ? translate('quality_gates.cannot_set_default_no_cayc')
                     : null
@@ -129,7 +129,7 @@ export default function DetailsHeader({ qualityGate }: Readonly<Props>) {
             )}
             {actions.copy && (
               <Tooltip
-                overlay={
+                content={
                   qualityGate.caycStatus === CaycStatus.NonCompliant
                     ? translate('quality_gates.cannot_copy_no_cayc')
                     : null
@@ -145,7 +145,7 @@ export default function DetailsHeader({ qualityGate }: Readonly<Props>) {
             )}
             {actions.setAsDefault && (
               <Tooltip
-                overlay={
+                content={
                   qualityGate.caycStatus === CaycStatus.NonCompliant
                     ? translate('quality_gates.cannot_set_default_no_cayc')
                     : null
diff --git a/server/sonar-web/src/main/js/apps/quality-gates/components/List.tsx b/server/sonar-web/src/main/js/apps/quality-gates/components/List.tsx
index 4f268fdfd92..56dba85252b 100644
--- a/server/sonar-web/src/main/js/apps/quality-gates/components/List.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-gates/components/List.tsx
@@ -76,7 +76,7 @@ export default function List({ qualityGates, currentQualityGate }: Props) {
               )}
             </div>
             {qualityGate.caycStatus !== CaycStatus.NonCompliant && (
-              <Tooltip overlay={translate('quality_gates.cayc.tooltip.message')}>
+              <Tooltip content={translate('quality_gates.cayc.tooltip.message')}>
                 <span>
                   <QGRecommendedIcon />
                 </span>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonForm.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonForm.tsx
index 58a9815dbbc..0446064fca5 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonForm.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonForm.tsx
@@ -81,7 +81,7 @@ function OptionRenderer(props: Readonly<OptionProps<Option, false>>) {
     <components.Option {...props}>
       <span>{label}</span>
       {isDefault && (
-        <Tooltip overlay={intl.formatMessage({ id: 'quality_profiles.list.default.help' })}>
+        <Tooltip content={intl.formatMessage({ id: 'quality_profiles.list.default.help' })}>
           <span>
             <Badge className="sw-ml-1">{intl.formatMessage({ id: 'default' })}</Badge>
           </span>
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResultActivation.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResultActivation.tsx
index 7727b0f947d..7df42fa7ea5 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResultActivation.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResultActivation.tsx
@@ -60,7 +60,7 @@ export default function ComparisonResultActivation(props: React.PropsWithChildre
 
   return (
     <Spinner loading={state === 'opening'}>
-      <Tooltip placement="bottom" overlay={activateRuleMsg}>
+      <Tooltip side="bottom" content={activateRuleMsg}>
         <ButtonSecondary
           disabled={state !== 'closed'}
           aria-label={activateRuleMsg}
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResultDeactivation.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResultDeactivation.tsx
index 6112b9d5bcb..59a91f7d513 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResultDeactivation.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/compare/ComparisonResultDeactivation.tsx
@@ -53,7 +53,7 @@ export default function ComparisonResultDeactivation(props: React.PropsWithChild
     >
       {({ onClick }) => (
         <Tooltip
-          overlay={
+          content={
             canDeactivateInheritedRules
               ? intl.formatMessage(
                   { id: 'quality_profiles.comparison.deactivate_rule' },
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/components/BuiltInQualityProfileBadge.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/components/BuiltInQualityProfileBadge.tsx
index 2e28d6b95e8..941c3fa44e3 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/components/BuiltInQualityProfileBadge.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/components/BuiltInQualityProfileBadge.tsx
@@ -35,7 +35,7 @@ export default function BuiltInQualityProfileBadge({ className, tooltip = true }
   );
 
   if (tooltip) {
-    return <Tooltip overlay={translate('quality_profiles.built_in.description')}>{badge}</Tooltip>;
+    return <Tooltip content={translate('quality_profiles.built_in.description')}>{badge}</Tooltip>;
   }
 
   return badge;
diff --git a/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesListRow.tsx b/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesListRow.tsx
index a4d14dadec6..a35dcd8b9fa 100644
--- a/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesListRow.tsx
+++ b/server/sonar-web/src/main/js/apps/quality-profiles/home/ProfilesListRow.tsx
@@ -66,7 +66,7 @@ export function ProfilesListRow(props: Readonly<ProfilesListRowProps>) {
 
       <ContentCell>
         {profile.isDefault ? (
-          <Tooltip overlay={intl.formatMessage({ id: 'quality_profiles.list.default.help' })}>
+          <Tooltip content={intl.formatMessage({ id: 'quality_profiles.list.default.help' })}>
             <Badge>{intl.formatMessage({ id: 'default' })}</Badge>
           </Tooltip>
         ) : (
@@ -80,7 +80,7 @@ export function ProfilesListRow(props: Readonly<ProfilesListRowProps>) {
 
           {profile.activeDeprecatedRuleCount > 0 && (
             <span className="sw-ml-2">
-              <Tooltip overlay={intl.formatMessage({ id: 'quality_profiles.deprecated_rules' })}>
+              <Tooltip content={intl.formatMessage({ id: 'quality_profiles.deprecated_rules' })}>
                 <BaseLink to={deprecatedRulesUrl} className="sw-border-0">
                   <Badge variant="deleted">{profile.activeDeprecatedRuleCount}</Badge>
                 </BaseLink>
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeaderRightSection.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeaderRightSection.tsx
index 3c3f2cc680d..64ea79d4804 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeaderRightSection.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotHeaderRightSection.tsx
@@ -49,7 +49,7 @@ export default function HotspotHeaderRightSection(props: Props) {
       {hotspot.codeVariants && hotspot.codeVariants.length > 0 && (
         <HotspotHeaderInfo title={translate('issues.facet.codeVariants')} className="sw-truncate">
           <LightLabel className="sw-body-sm">
-            <Tooltip overlay={hotspot.codeVariants.join(', ')}>
+            <Tooltip content={hotspot.codeVariants.join(', ')}>
               <span>{hotspot.codeVariants.join(', ')}</span>
             </Tooltip>
           </LightLabel>
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSidebarHeader.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSidebarHeader.tsx
index 1a587ce308b..b640a000212 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSidebarHeader.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSidebarHeader.tsx
@@ -128,8 +128,8 @@ function HotspotSidebarHeader(props: SecurityHotspotsAppRendererProps) {
                 {userLoggedIn && (
                   <Tooltip
                     classNameSpace={component?.needIssueSync ? 'tooltip' : 'sw-hidden'}
-                    overlay={<HotspotDisabledFilterTooltip />}
-                    placement="right"
+                    content={<HotspotDisabledFilterTooltip />}
+                    side="right"
                   >
                     <ItemCheckbox
                       checked={Boolean(filters.assignedToMe)}
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSimpleList.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSimpleList.tsx
index b7729278627..c39192787a4 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSimpleList.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/HotspotSimpleList.tsx
@@ -89,7 +89,7 @@ export default function HotspotSimpleList(props: HotspotSimpleListProps) {
             <SubNavigationContainer className="sw-flex sw-justify-between">
               <div className="sw-flex sw-items-center">
                 {filterByFile ? (
-                  <Tooltip overlay={filterByFile}>
+                  <Tooltip content={filterByFile}>
                     <span>
                       <QualifierIcon className="sw-mr-1" qualifier={ComponentQualifier.File} />
                       {fileFromPath(filterByFile)}
diff --git a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusReviewButton.tsx b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusReviewButton.tsx
index d956ec80cea..171ea409a3c 100644
--- a/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusReviewButton.tsx
+++ b/server/sonar-web/src/main/js/apps/security-hotspots/components/status/StatusReviewButton.tsx
@@ -41,8 +41,8 @@ export function StatusReviewButton(props: StatusProps) {
   return (
     <>
       <Tooltip
-        overlay={readonly ? translate('hotspots.status.cannot_change_status') : null}
-        placement="bottom"
+        content={readonly ? translate('hotspots.status.cannot_change_status') : null}
+        side="bottom"
       >
         <ButtonPrimary id="status-trigger" onClick={() => setIsOpen(true)} disabled={readonly}>
           {translate('hotspots.status.review')}
diff --git a/server/sonar-web/src/main/js/apps/settings/components/DefinitionDescription.tsx b/server/sonar-web/src/main/js/apps/settings/components/DefinitionDescription.tsx
index 4e63f301c92..342f00dde2b 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/DefinitionDescription.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/DefinitionDescription.tsx
@@ -45,7 +45,7 @@ export default function DefinitionDescription({ definition }: Readonly<Props>) {
         />
       )}
 
-      <Tooltip overlay={translateWithParameters('settings.key_x', definition.key)}>
+      <Tooltip content={translateWithParameters('settings.key_x', definition.key)}>
         <Note as="div" className="sw-mt-4">
           {translateWithParameters('settings.key_x', definition.key)}
         </Note>
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionBox.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionBox.tsx
index 2cca33a9d60..9b54225ab2f 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionBox.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/AlmBindingDefinitionBox.tsx
@@ -182,7 +182,7 @@ export default function AlmBindingDefinitionBox(props: AlmBindingDefinitionBoxPr
       {status.type !== AlmSettingsBindingStatusType.Warning && (
         <div className="sw-flex sw-mb-3">
           <div className="sw-mr-10">
-            <Tooltip overlay={getPrDecoFeatureDescription(alm)}>
+            <Tooltip content={getPrDecoFeatureDescription(alm)}>
               <span>{translate('settings.almintegration.feature.status_reporting.title')}</span>
             </Tooltip>
             {getPRDecorationFeatureStatus(branchesEnabled, status.type)}
@@ -190,7 +190,7 @@ export default function AlmBindingDefinitionBox(props: AlmBindingDefinitionBoxPr
           {IMPORT_COMPATIBLE_ALMS.includes(alm) && (
             <div>
               <Tooltip
-                overlay={translate('settings.almintegration.feature.alm_repo_import.description')}
+                content={translate('settings.almintegration.feature.alm_repo_import.description')}
               >
                 <span>{translate('settings.almintegration.feature.alm_repo_import.title')}</span>
               </Tooltip>
diff --git a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/CreationTooltip.tsx b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/CreationTooltip.tsx
index 76ba872ca80..2fb9dbece83 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/almIntegration/CreationTooltip.tsx
+++ b/server/sonar-web/src/main/js/apps/settings/components/almIntegration/CreationTooltip.tsx
@@ -46,7 +46,7 @@ export function CreationTooltip(props: CreationTooltipProps) {
 
   return (
     <Tooltip
-      overlay={
+      content={
         preventCreation ? (
           <FormattedMessage
             id="settings.almintegration.create.tooltip"
diff --git a/server/sonar-web/src/main/js/apps/system/components/info-items/HealthItem.tsx b/server/sonar-web/src/main/js/apps/system/components/info-items/HealthItem.tsx
index 357e8dca6fc..9b1988e7fab 100644
--- a/server/sonar-web/src/main/js/apps/system/components/info-items/HealthItem.tsx
+++ b/server/sonar-web/src/main/js/apps/system/components/info-items/HealthItem.tsx
@@ -44,7 +44,7 @@ export default function HealthItem({ className, name, health, healthCauses }: Re
         ))}
 
       <Tooltip
-        overlay={name ? translateWithParameters('system.current_health_of_x', name) : undefined}
+        content={name ? translateWithParameters('system.current_health_of_x', name) : undefined}
       >
         <span>{statusIndicator}</span>
       </Tooltip>
diff --git a/server/sonar-web/src/main/js/apps/web-api/components/DeprecatedBadge.tsx b/server/sonar-web/src/main/js/apps/web-api/components/DeprecatedBadge.tsx
index 6cf82658848..894be35d029 100644
--- a/server/sonar-web/src/main/js/apps/web-api/components/DeprecatedBadge.tsx
+++ b/server/sonar-web/src/main/js/apps/web-api/components/DeprecatedBadge.tsx
@@ -32,7 +32,7 @@ export default function DeprecatedBadge({ since }: { since?: string }) {
     ? translateWithParameters('api_documentation.deprecated_since_x', since)
     : translate('api_documentation.deprecated');
   return (
-    <Tooltip overlay={overlay}>
+    <Tooltip content={overlay}>
       <span>
         <Badge variant="default">{label}</Badge>
       </span>
diff --git a/server/sonar-web/src/main/js/apps/web-api/components/InternalBadge.tsx b/server/sonar-web/src/main/js/apps/web-api/components/InternalBadge.tsx
index f659020d052..7d4e5444aa8 100644
--- a/server/sonar-web/src/main/js/apps/web-api/components/InternalBadge.tsx
+++ b/server/sonar-web/src/main/js/apps/web-api/components/InternalBadge.tsx
@@ -24,7 +24,7 @@ import { translate } from '../../../helpers/l10n';
 
 export default function InternalBadge() {
   return (
-    <Tooltip overlay={translate('api_documentation.internal_tooltip')}>
+    <Tooltip content={translate('api_documentation.internal_tooltip')}>
       <span>
         <Badge variant="deleted">{translate('internal')}</Badge>
       </span>
diff --git a/server/sonar-web/src/main/js/apps/webhooks/components/PageActions.tsx b/server/sonar-web/src/main/js/apps/webhooks/components/PageActions.tsx
index 57b6c4cc83d..8fcebb986f7 100644
--- a/server/sonar-web/src/main/js/apps/webhooks/components/PageActions.tsx
+++ b/server/sonar-web/src/main/js/apps/webhooks/components/PageActions.tsx
@@ -52,7 +52,7 @@ export default function PageActions(props: Props) {
 
   if (webhooksCount >= WEBHOOKS_LIMIT) {
     return (
-      <Tooltip overlay={translateWithParameters('webhooks.maximum_reached', WEBHOOKS_LIMIT)}>
+      <Tooltip content={translateWithParameters('webhooks.maximum_reached', WEBHOOKS_LIMIT)}>
         <ButtonPrimary className="it__webhook-create" disabled>
           {translate('create')}
         </ButtonPrimary>
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/LineDuplicationBlock.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/LineDuplicationBlock.tsx
index 897b60e7bea..a05afb97244 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/LineDuplicationBlock.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/LineDuplicationBlock.tsx
@@ -48,7 +48,7 @@ export function LineDuplicationBlock(props: LineDuplicationBlockProps) {
   const handleClose = React.useCallback(() => setPopupOpen(false), []);
 
   return duplicated ? (
-    <Tooltip overlay={tooltip} placement={PopupPlacement.Right}>
+    <Tooltip content={tooltip} side={PopupPlacement.Right}>
       <LineMeta
         className="it__source-line-duplicated"
         data-index={index}
@@ -56,10 +56,10 @@ export function LineDuplicationBlock(props: LineDuplicationBlockProps) {
       >
         <OutsideClickHandler onClickOutside={handleClose}>
           <Tooltip
-            placement={PopupPlacement.Right}
-            visible={popupOpen}
+            side={PopupPlacement.Right}
+            isOpen={popupOpen}
             isInteractive
-            overlay={popupOpen ? props.renderDuplicationPopup(index, line.line) : undefined}
+            content={popupOpen ? props.renderDuplicationPopup(index, line.line) : undefined}
             classNameInner="sw-max-w-abs-400"
           >
             <DuplicationBlock
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/LineIssuesIndicator.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/LineIssuesIndicator.tsx
index c4d4d50c824..250d19f6ca4 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/LineIssuesIndicator.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/LineIssuesIndicator.tsx
@@ -67,7 +67,7 @@ export function LineIssuesIndicator(props: LineIssuesIndicatorProps) {
 
   return (
     <LineMeta className="it__source-line-with-issues" data-line-number={line.line}>
-      <Tooltip mouseLeaveDelay={MOUSE_LEAVE_DELAY} overlay={tooltipContent}>
+      <Tooltip mouseLeaveDelay={MOUSE_LEAVE_DELAY} content={tooltipContent}>
         <IssueIndicatorButton
           aria-label={tooltipContent}
           aria-expanded={issuesOpen}
diff --git a/server/sonar-web/src/main/js/components/SourceViewer/components/LineSCM.tsx b/server/sonar-web/src/main/js/components/SourceViewer/components/LineSCM.tsx
index a3d75917d9f..5fe6dbbe20c 100644
--- a/server/sonar-web/src/main/js/components/SourceViewer/components/LineSCM.tsx
+++ b/server/sonar-web/src/main/js/components/SourceViewer/components/LineSCM.tsx
@@ -66,9 +66,9 @@ function LineSCM({ line, previousLine }: Props) {
     <LineMeta data-line-number={line.line}>
       <OutsideClickHandler onClickOutside={handleClose}>
         <Tooltip
-          overlay={<SCMPopup line={line} />}
-          placement={PopupPlacement.Right}
-          visible={isOpen}
+          content={<SCMPopup line={line} />}
+          side={PopupPlacement.Right}
+          isOpen={isOpen}
           isInteractive
           classNameInner="sw-max-w-abs-600"
         >
diff --git a/server/sonar-web/src/main/js/components/activity-graph/EventInner.tsx b/server/sonar-web/src/main/js/components/activity-graph/EventInner.tsx
index af8dc01651b..3996d5e2125 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/EventInner.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/EventInner.tsx
@@ -65,7 +65,7 @@ export default function EventInner({ event, readonly }: EventInnerProps) {
       : event.description;
 
   return (
-    <Tooltip overlay={tooltipContent}>
+    <Tooltip content={tooltipContent}>
       <div className="sw-min-w-0 sw-flex-1 sw-py-1/2">
         <div className="sw-flex sw-items-start">
           <span>
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendCustom.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendCustom.tsx
index a2ef7eb9830..4dd506acea5 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendCustom.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendCustom.tsx
@@ -53,7 +53,7 @@ export default function GraphsLegendCustom(props: GraphsLegendCustomProps) {
           return (
             <Tooltip
               key={serie.name}
-              overlay={translate('project_activity.graphs.custom.metric_no_history')}
+              content={translate('project_activity.graphs.custom.metric_no_history')}
             >
               <li
                 className="sw-mx-2"
diff --git a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx
index 8035becb36d..239a868a50d 100644
--- a/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx
+++ b/server/sonar-web/src/main/js/components/activity-graph/GraphsLegendItem.tsx
@@ -76,7 +76,7 @@ export function GraphsLegendItem({
       </span>
       {isDeprecated && (
         <Tooltip
-          overlay={
+          content={
             <FormattedMessage
               id={getDeprecatedTranslationKeyForTooltip(metric as MetricKey)}
               tagName="div"
diff --git a/server/sonar-web/src/main/js/components/common/DisableableSelectOption.tsx b/server/sonar-web/src/main/js/components/common/DisableableSelectOption.tsx
index 1fa817dd339..2d70f784cb3 100644
--- a/server/sonar-web/src/main/js/components/common/DisableableSelectOption.tsx
+++ b/server/sonar-web/src/main/js/components/common/DisableableSelectOption.tsx
@@ -31,7 +31,7 @@ export default function DisableableSelectOption(props: DisableableSelectOptionPr
   const { option, disableTooltipOverlay, disabledReason, className = '' } = props;
   const label = option.label || option.value;
   return option.isDisabled ? (
-    <Tooltip overlay={disableTooltipOverlay()} placement="left">
+    <Tooltip content={disableTooltipOverlay()} side="left">
       <span className={className}>
         {label}
         {disabledReason !== undefined && <em className="small sw-ml-1">({disabledReason})</em>}
diff --git a/server/sonar-web/src/main/js/components/common/PrivacyBadgeContainer.tsx b/server/sonar-web/src/main/js/components/common/PrivacyBadgeContainer.tsx
index cc9ebd48d7b..2090c30a993 100644
--- a/server/sonar-web/src/main/js/components/common/PrivacyBadgeContainer.tsx
+++ b/server/sonar-web/src/main/js/components/common/PrivacyBadgeContainer.tsx
@@ -35,7 +35,7 @@ export default function PrivacyBadgeContainer({
   visibility,
 }: PrivacyBadgeContainerProps) {
   return (
-    <Tooltip overlay={translate('visibility', visibility, 'description', qualifier)}>
+    <Tooltip content={translate('visibility', visibility, 'description', qualifier)}>
       <div className={classNames('badge', className)}>{translate('visibility', visibility)}</div>
     </Tooltip>
   );
diff --git a/server/sonar-web/src/main/js/components/controls/Favorite.tsx b/server/sonar-web/src/main/js/components/controls/Favorite.tsx
index a5c5e17fdde..07e81ed4619 100644
--- a/server/sonar-web/src/main/js/components/controls/Favorite.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Favorite.tsx
@@ -96,7 +96,7 @@ export default class Favorite extends React.PureComponent<Props, State> {
         toggleFavorite={this.toggleFavorite}
         tooltip={Tooltip}
         favorite={favorite}
-        innerRef={(node) => (this.buttonNode = node)}
+        innerRef={(node: HTMLElement | null) => (this.buttonNode = node)}
       />
     );
   }
diff --git a/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx b/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx
index e7d6e2ff1af..e0fe8fbe090 100644
--- a/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx
+++ b/server/sonar-web/src/main/js/components/controls/HomePageSelect.tsx
@@ -65,7 +65,7 @@ export function HomePageSelect(props: Readonly<Props>) {
   const Icon = isChecked ? HomeFillIcon : HomeIcon;
 
   return (
-    <Tooltip overlay={tooltip}>
+    <Tooltip content={tooltip}>
       {type === 'icon' ? (
         <DiscreetInteractiveIcon
           aria-label={tooltip}
diff --git a/server/sonar-web/src/main/js/components/controls/Tooltip.tsx b/server/sonar-web/src/main/js/components/controls/Tooltip.tsx
index 56e463fb7f1..af330ecdb91 100644
--- a/server/sonar-web/src/main/js/components/controls/Tooltip.tsx
+++ b/server/sonar-web/src/main/js/components/controls/Tooltip.tsx
@@ -38,9 +38,9 @@ interface TooltipProps {
   mouseLeaveDelay?: number;
   onShow?: () => void;
   onHide?: () => void;
-  overlay: React.ReactNode;
-  placement?: Placement;
-  visible?: boolean;
+  content: React.ReactNode;
+  side?: Placement;
+  isOpen?: boolean;
   // If tooltip overlay has interactive content (links for instance) we may set this to true to stop
   // default behavior of tabbing (other changes should be done outside of this component to make it work)
   // See example DocHelpTooltip
@@ -90,7 +90,7 @@ function isMeasured(state: State): state is OwnState & Measurements {
 export default function Tooltip(props: TooltipProps) {
   // `overlay` is a ReactNode, so it can be `undefined` or `null`. This allows to easily
   // render a tooltip conditionally. More generally, we avoid rendering empty tooltips.
-  return props.overlay != null && props.overlay !== '' ? (
+  return props.content != null && props.content !== '' ? (
     <TooltipInner {...props} />
   ) : (
     props.children
@@ -114,8 +114,8 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
     super(props);
     this.state = {
       flipped: false,
-      placement: props.placement,
-      visible: props.visible ?? false,
+      placement: props.side,
+      visible: props.isOpen ?? false,
     };
     this.id = uniqueId('tooltip-');
     this.throttledPositionTooltip = throttle(this.positionTooltip, 10);
@@ -123,15 +123,15 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
 
   componentDidMount() {
     this.mounted = true;
-    if (this.props.visible === true) {
+    if (this.props.isOpen === true) {
       this.positionTooltip();
       this.addEventListeners();
     }
   }
 
   componentDidUpdate(prevProps: TooltipProps, prevState: State) {
-    if (this.props.placement !== prevProps.placement) {
-      this.setState({ placement: this.props.placement });
+    if (this.props.side !== prevProps.side) {
+      this.setState({ placement: this.props.side });
       // Break. This will trigger a new componentDidUpdate() call, so the below
       // positionTooltip() call will be correct. Otherwise, it might not use
       // the new state.placement value.
@@ -140,15 +140,15 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
 
     if (
       // opens
-      (this.props.visible === true && !prevProps.visible) ||
-      (this.props.visible === undefined && this.state.visible && !prevState.visible)
+      (this.props.isOpen === true && !prevProps.isOpen) ||
+      (this.props.isOpen === undefined && this.state.visible && !prevState.visible)
     ) {
       this.positionTooltip();
       this.addEventListeners();
     } else if (
       // closes
-      (!this.props.visible && prevProps.visible === true) ||
-      (this.props.visible === undefined && !this.state.visible && prevState.visible)
+      (!this.props.isOpen && prevProps.isOpen === true) ||
+      (this.props.isOpen === undefined && !this.state.visible && prevState.visible)
     ) {
       this.clearPosition();
       this.removeEventListeners();
@@ -177,7 +177,7 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
   };
 
   isVisible = () => {
-    return this.props.visible ?? this.state.visible;
+    return this.props.isOpen ?? this.state.visible;
   };
 
   getPlacement = (): Placement => {
@@ -255,7 +255,7 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
       top: undefined,
       width: undefined,
       height: undefined,
-      placement: this.props.placement,
+      placement: this.props.side,
     });
   };
 
@@ -267,7 +267,7 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
         // (if it's `undefined`, it means the timer has been reset).
         if (
           this.mounted &&
-          this.props.visible === undefined &&
+          this.props.isOpen === undefined &&
           this.mouseEnterTimeout !== undefined
         ) {
           this.setState({ visible: true });
@@ -290,7 +290,7 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
     if (!this.mouseIn) {
       this.mouseLeaveTimeout = window.setTimeout(
         () => {
-          if (this.mounted && this.props.visible === undefined && !this.mouseIn) {
+          if (this.mounted && this.props.isOpen === undefined && !this.mouseIn) {
             this.setState({ visible: false });
           }
           if (this.props.onHide && !this.mouseIn) {
@@ -415,7 +415,12 @@ export class TooltipInner extends React.Component<TooltipProps, State> {
 
   renderOverlay() {
     const isVisible = this.isVisible();
-    const { classNameSpace = 'tooltip', isInteractive, overlay, classNameInner } = this.props;
+    const {
+      classNameSpace = 'tooltip',
+      isInteractive,
+      content: overlay,
+      classNameInner,
+    } = this.props;
     return (
       <div
         className={classNames(`${classNameSpace}-inner sw-font-sans`, classNameInner, {
diff --git a/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopupHelper.tsx b/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopupHelper.tsx
index ff344952398..39fd69449af 100644
--- a/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopupHelper.tsx
+++ b/server/sonar-web/src/main/js/components/embed-docs-modal/EmbedDocsPopupHelper.tsx
@@ -36,7 +36,7 @@ export default function EmbedDocsPopupHelper() {
         zLevel={PopupZLevel.Global}
       >
         {({ onToggleClick, open }) => (
-          <Tooltip mouseLeaveDelay={0.2} overlay={!open ? translate('help') : undefined}>
+          <Tooltip mouseLeaveDelay={0.2} content={!open ? translate('help') : undefined}>
             <InteractiveIcon
               Icon={IconQuestionMark}
               aria-expanded={open}
diff --git a/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx b/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx
index ce454048545..3d692d4f6b0 100644
--- a/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/IssueMetaBar.tsx
@@ -75,7 +75,7 @@ export default function IssueMetaBar(props: Readonly<Props>) {
         <>
           <li className={issueMetaListItemClassNames}>
             <Tooltip
-              overlay={translateWithParameters('issue.from_external_rule_engine', ruleEngine)}
+              content={translateWithParameters('issue.from_external_rule_engine', ruleEngine)}
             >
               <span>
                 <Badge>{ruleEngine}</Badge>
@@ -89,7 +89,7 @@ export default function IssueMetaBar(props: Readonly<Props>) {
       {!!issue.codeVariants?.length && (
         <>
           <IssueMetaListItem>
-            <Tooltip overlay={issue.codeVariants.join(', ')}>
+            <Tooltip content={issue.codeVariants.join(', ')}>
               <span>
                 {issue.codeVariants.length > 1
                   ? translateWithParameters('issue.x_code_variants', issue.codeVariants.length)
@@ -116,7 +116,7 @@ export default function IssueMetaBar(props: Readonly<Props>) {
 
       {showLine && isDefined(issue.textRange) && (
         <>
-          <Tooltip overlay={translate('line_number')}>
+          <Tooltip content={translate('line_number')}>
             <IssueMetaListItem className={issueMetaListItemClassNames}>
               {translateWithParameters('issue.ncloc_x.short', issue.textRange.endLine)}
             </IssueMetaListItem>
diff --git a/server/sonar-web/src/main/js/components/issue/components/SonarLintBadge.tsx b/server/sonar-web/src/main/js/components/issue/components/SonarLintBadge.tsx
index ae18f700477..5f03969c216 100644
--- a/server/sonar-web/src/main/js/components/issue/components/SonarLintBadge.tsx
+++ b/server/sonar-web/src/main/js/components/issue/components/SonarLintBadge.tsx
@@ -39,7 +39,7 @@ export default function SonarLintBadge({ compact }: Readonly<Props>) {
 function SonarLintBadgeFull() {
   return (
     <Tooltip
-      overlay={translate('issue.quick_fix_available_with_sonarlint_no_link')}
+      content={translate('issue.quick_fix_available_with_sonarlint_no_link')}
       mouseLeaveDelay={0.5}
     >
       <LinkStandalone
@@ -65,7 +65,7 @@ function SonarLintBadgeFull() {
 function SonarLintBadgeCompact() {
   return (
     <Tooltip
-      overlay={
+      content={
         <FormattedMessage
           id="issue.quick_fix_available_with_sonarlint"
           defaultMessage={translate('issue.quick_fix_available_with_sonarlint')}
diff --git a/server/sonar-web/src/main/js/components/permissions/PermissionHeader.tsx b/server/sonar-web/src/main/js/components/permissions/PermissionHeader.tsx
index 73bed5c6305..0df8399d0bf 100644
--- a/server/sonar-web/src/main/js/components/permissions/PermissionHeader.tsx
+++ b/server/sonar-web/src/main/js/components/permissions/PermissionHeader.tsx
@@ -68,7 +68,7 @@ export default class PermissionHeader extends React.PureComponent<Props> {
         <ClickEventBoundary>
           <BareButton onClick={this.handlePermissionClick}>
             <Tooltip
-              overlay={translateWithParameters(
+              content={translateWithParameters(
                 'global_permissions.filter_by_x_permission',
                 permission.name,
               )}
diff --git a/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx b/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx
index 69b10941cca..adb623f07e2 100644
--- a/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx
+++ b/server/sonar-web/src/main/js/components/workspace/WorkspaceHeader.tsx
@@ -129,7 +129,7 @@ function WorkspaceHeaderButton({
   tooltipContent,
 }: Readonly<WorkspaceHeaderButtonProps>) {
   return (
-    <Tooltip overlay={translate(tooltipContent)}>
+    <Tooltip content={translate(tooltipContent)}>
       <InteractiveIcon
         aria-label={translate(tooltipContent)}
         Icon={icon}
diff --git a/server/sonar-web/src/main/js/sonar-aligned/components/controls/DocHelpTooltip.tsx b/server/sonar-web/src/main/js/sonar-aligned/components/controls/DocHelpTooltip.tsx
index 8454f7c1b90..19d0e4f0ab2 100644
--- a/server/sonar-web/src/main/js/sonar-aligned/components/controls/DocHelpTooltip.tsx
+++ b/server/sonar-web/src/main/js/sonar-aligned/components/controls/DocHelpTooltip.tsx
@@ -121,8 +121,8 @@ export default function DocHelpTooltip(props: Readonly<DocHelpTooltipProps>) {
         mouseLeaveDelay={0.25}
         onShow={handleShowTooltip}
         onHide={handleHideTooltip}
-        overlay={overlay}
-        placement={placement}
+        content={overlay}
+        side={placement}
         isInteractive
       >
         <span
diff --git a/server/sonar-web/src/main/js/sonar-aligned/components/controls/HelpTooltip.tsx b/server/sonar-web/src/main/js/sonar-aligned/components/controls/HelpTooltip.tsx
index 5b62130d27b..41ad7f597a7 100644
--- a/server/sonar-web/src/main/js/sonar-aligned/components/controls/HelpTooltip.tsx
+++ b/server/sonar-web/src/main/js/sonar-aligned/components/controls/HelpTooltip.tsx
@@ -43,7 +43,7 @@ export default function HelpTooltip(props: Readonly<Props>) {
         props.className,
       )}
     >
-      <Tooltip mouseLeaveDelay={0.25} overlay={overlay} placement={placement}>
+      <Tooltip mouseLeaveDelay={0.25} content={overlay} side={placement}>
         <span
           aria-label={props['aria-label']}
           className="sw-inline-flex sw-items-center"