From 1b4458ff9c920b7e1995cfb44852b48c0356d399 Mon Sep 17 00:00:00 2001
From: Rita Anene <92169163+Camillarhi@users.noreply.github.com>
Date: Sun, 28 Jul 2024 19:47:27 +0100
Subject: [PATCH] [MM-59342] Migrate tooltips of
 "components/plugin_marketplace/marketplace_item/marketplace_item.tsx" to
 WithTooltip (#27588)

---
 .../marketplace_item/marketplace_item.tsx     | 34 +++++--------------
 1 file changed, 9 insertions(+), 25 deletions(-)

diff --git a/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item.tsx b/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item.tsx
index 18d95d7a55..254de5b917 100644
--- a/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item.tsx
+++ b/webapp/channels/src/components/plugin_marketplace/marketplace_item/marketplace_item.tsx
@@ -7,12 +7,9 @@ import React from 'react';
 import type {MarketplaceLabel} from '@mattermost/types/marketplace';
 
 import ExternalLink from 'components/external_link';
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
 import PluginIcon from 'components/widgets/icons/plugin_icon';
 import Tag from 'components/widgets/tag/tag';
-
-import {Constants} from 'utils/constants';
+import WithTooltip from 'components/with_tooltip';
 
 // Label renders a tag showing a name and a description in a tooltip.
 // If a URL is provided, clicking on the tag will open the URL in a new tab.
@@ -28,17 +25,13 @@ export const Label = ({name, description, url}: MarketplaceLabel): JSX.Element =
     let label;
     if (description) {
         label = (
-            <OverlayTrigger
-                delayShow={Constants.OVERLAY_TIME_DELAY}
+            <WithTooltip
+                id={'plugin-marketplace_label_' + name.toLowerCase() + '-tooltip'}
+                title={description}
                 placement='top'
-                overlay={
-                    <Tooltip id={'plugin-marketplace_label_' + name.toLowerCase() + '-tooltip'}>
-                        {description}
-                    </Tooltip>
-                }
             >
                 {tag}
-            </OverlayTrigger>
+            </WithTooltip>
         );
     } else {
         label = tag;
@@ -142,23 +135,14 @@ export default class MarketplaceItem extends React.PureComponent <MarketplaceIte
         );
 
         if (this.state.showTooltip) {
-            const displayNameToolTip = (
-                <Tooltip
-                    id='marketplace-item-description__tooltip'
-                    className='more-modal__description-tooltip'
-                >
-                    {descriptionText}
-                </Tooltip>
-            );
-
             description = (
-                <OverlayTrigger
-                    delayShow={Constants.OVERLAY_TIME_DELAY}
+                <WithTooltip
+                    id='marketplace-item-description__tooltip'
+                    title={descriptionText || ''}
                     placement='top'
-                    overlay={displayNameToolTip}
                 >
                     {description}
-                </OverlayTrigger>
+                </WithTooltip>
             );
         }