MM-57119 Migrate various components to use WithTooltip (#26458)

* MM-57119 Migrate MultiSelectCard to use WithTooltip

* MM-57119 Migrate SeatsCalculator to use WithTooltip

* MM-57119 Migrate BillingSummary and RenewalCard to WithTooltip

* Add getEmojiName helper function

* Add emojiStyle=large option for WithTooltip

* MM-57119 Migrate PostRecentReactions to use WithTooltip

* MM-57119 Migrate Reaction to use WithTooltip

* MM-57119 Migrate PostReaction to use WithTooltip

* MM-57119 Migrate ReactionList to use WithTooltip

* Change how WithTooltip's shortcut prop works to take a sequence of keys

* Convert TeamButton to functional component

* MM-57119 Migrate TeamButton to use WithTooltip

* MM-57119 Migrate ChannelFilter to use WithTooltip

* Revert unintentional change

* Finish removing values prop from KeyboardShortcutSequence

* Address feedback

* Add margin between emoji and text

webapp/channels/src/components/admin_console/billing/billing_subscriptions/billing_subscriptions.scss

@@ -11,10 +11,6 @@
     }
 }
 
-#BillingSubscriptions__seatOverageTooltip {
-    margin-left: -5px;
-}
-
 .BillingSubscriptions__tooltip.tooltip {
     font-family: 'Open Sans', sans-serif;
 
@@ -67,18 +63,6 @@
     }
 }
 
-.BillingSubscriptions__tooltipTitle {
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 24px;
-}
-
-.BillingSubscriptions__tooltipMessage {
-    margin-top: 8px;
-    font-size: 14px;
-    line-height: 20px;
-}
-
 .UpgradeMattermostCloud {
     text-align: center;
 }

webapp/channels/src/components/admin_console/billing/billing_summary/billing_summary.tsx

@@ -2,7 +2,7 @@
 // See LICENSE.txt for license information.
 
 import React from 'react';
-import {FormattedDate, FormattedMessage, FormattedNumber} from 'react-intl';
+import {FormattedDate, FormattedMessage, FormattedNumber, defineMessages} from 'react-intl';
 import {useDispatch} from 'react-redux';
 
 import {CheckCircleOutlineIcon, CheckIcon, ClockOutlineIcon} from '@mattermost/compass-icons/components';
@@ -18,11 +18,21 @@ import CloudInvoicePreview from 'components/cloud_invoice_preview';
 import EmptyBillingHistorySvg from 'components/common/svg_images_components/empty_billing_history_svg';
 import UpgradeSvg from 'components/common/svg_images_components/upgrade_svg';
 import ExternalLink from 'components/external_link';
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
+import WithTooltip from 'components/with_tooltip';
 
 import {BillingSchemes, CloudLinks, TrialPeriodDays, ModalIdentifiers} from 'utils/constants';
 
+const messages = defineMessages({
+    partialChargesTooltipTitle: {
+        id: 'admin.billing.subscriptions.billing_summary.lastInvoice.whatArePartialCharges',
+        defaultMessage: 'What are partial charges?',
+    },
+    partialChargesTooltipText: {
+        id: 'admin.billing.subscriptions.billing_summary.lastInvoice.whatArePartialCharges.message',
+        defaultMessage: 'Users who have not been enabled for the full duration of the month are charged at a prorated monthly rate.',
+    },
+});
+
 export const noBillingHistory = (
     <div className='BillingSummary__noBillingHistory'>
         <EmptyBillingHistorySvg
@@ -180,6 +190,7 @@ type InvoiceInfoProps = {
 
 export const InvoiceInfo = ({invoice, product, fullCharges, partialCharges, hasMore, willRenew}: InvoiceInfoProps) => {
     const dispatch = useDispatch();
+
     const isUpcomingInvoice = invoice?.status.toLowerCase() === 'upcoming';
     const openInvoicePreview = () => {
         dispatch(
@@ -298,32 +309,14 @@ export const InvoiceInfo = ({invoice, product, fullCharges, partialCharges, hasM
                             id='admin.billing.subscriptions.billing_summary.lastInvoice.partialCharges'
                             defaultMessage='Partial charges'
                         />
-                        <OverlayTrigger
-                            delayShow={500}
+                        <WithTooltip
+                            id='BillingSubscriptions__seatOverageTooltip'
+                            title={messages.partialChargesTooltipTitle}
+                            hint={messages.partialChargesTooltipText}
                             placement='bottom'
-                            overlay={
-                                <Tooltip
-                                    id='BillingSubscriptions__seatOverageTooltip'
-                                    className='BillingSubscriptions__tooltip BillingSubscriptions__tooltip-right'
-                                    positionLeft={390}
-                                >
-                                    <div className='BillingSubscriptions__tooltipTitle'>
-                                        <FormattedMessage
-                                            id='admin.billing.subscriptions.billing_summary.lastInvoice.whatArePartialCharges'
-                                            defaultMessage='What are partial charges?'
-                                        />
-                                    </div>
-                                    <div className='BillingSubscriptions__tooltipMessage'>
-                                        <FormattedMessage
-                                            id='admin.billing.subscriptions.billing_summary.lastInvoice.whatArePartialCharges.message'
-                                            defaultMessage='Users who have not been enabled for the full duration of the month are charged at a prorated monthly rate.'
-                                        />
-                                    </div>
-                                </Tooltip>
-                            }
                         >
                             <i className='icon-information-outline'/>
-                        </OverlayTrigger>
+                        </WithTooltip>
                     </div>
                     {partialCharges.map((charge: any) => (
                         <div