[MM-58410] Migrate tooltips of 'components/post/post_component' to WithTooltip (#27199)

webapp/channels/src/components/post/post_component.tsx

@@ -22,7 +22,6 @@ import AutoHeightSwitcher, {AutoHeightSlots} from 'components/common/auto_height
 import EditPost from 'components/edit_post';
 import FileAttachmentListContainer from 'components/file_attachment_list';
 import MessageWithAdditionalContent from 'components/message_with_additional_content';
-import OverlayTrigger from 'components/overlay_trigger';
 import PriorityLabel from 'components/post_priority/post_priority_label';
 import PostProfilePicture from 'components/post_profile_picture';
 import PostAcknowledgements from 'components/post_view/acknowledgements';
@@ -37,9 +36,9 @@ import PostTime from 'components/post_view/post_time';
 import ReactionList from 'components/post_view/reaction_list';
 import ThreadFooter from 'components/threading/channel_threads/thread_footer';
 import type {Props as TimestampProps} from 'components/timestamp/timestamp';
-import Tooltip from 'components/tooltip';
 import ArchiveIcon from 'components/widgets/icons/archive_icon';
 import InfoSmallIcon from 'components/widgets/icons/info_small_icon';
+import WithTooltip from 'components/with_tooltip';
 
 import {getHistory} from 'utils/browser_history';
 import Constants, {A11yCustomEventTypes, AppEvents, Locations} from 'utils/constants';
@@ -593,17 +592,15 @@ const PostComponent = (props: Props): JSX.Element => {
                                 }
                                 {priority}
                                 {post.props && post.props.card &&
-                                    <OverlayTrigger
+                                    <WithTooltip
-                                        delayShow={Constants.OVERLAY_TIME_DELAY}
+                                        id='post_info.info.view_additional_info'
-                                        placement='top'
+                                        title={
-                                        overlay={
+                                            <FormattedMessage
-                                            <Tooltip>
+                                                id='post_info.info.view_additional_info'
-                                                <FormattedMessage
+                                                defaultMessage='View additional info'
-                                                    id='post_info.info.view_additional_info'
+                                            />
-                                                    defaultMessage='View additional info'
-                                                />
-                                            </Tooltip>
                                         }
+                                        placement='top'
                                     >
                                         <button
                                             className={'card-icon__container icon--show style--none ' + (props.isCardOpen ? 'active' : '')}
@@ -617,7 +614,7 @@ const PostComponent = (props: Props): JSX.Element => {
                                                 aria-hidden='true'
                                             />
                                         </button>
-                                    </OverlayTrigger>
+                                    </WithTooltip>
                                 }
                                 {visibleMessage}
                             </div>