diff --git a/webapp/channels/src/components/advanced_text_editor/toggle_formatting_bar.test.tsx b/webapp/channels/src/components/advanced_text_editor/toggle_formatting_bar.test.tsx
new file mode 100644
index 0000000000..203f611566
--- /dev/null
+++ b/webapp/channels/src/components/advanced_text_editor/toggle_formatting_bar.test.tsx
@@ -0,0 +1,66 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react';
+
+import {renderWithContext, fireEvent, screen} from 'tests/react_testing_utils';
+
+import ToggleFormattingBar from './toggle_formatting_bar';
+
+jest.mock('components/with_tooltip', () => {
+    return ({children}: { children: React.ReactNode }) => <div>{children}</div>;
+});
+
+describe('ToggleFormattingBar Component', () => {
+    it('should render correctly with default props', () => {
+        renderWithContext(
+            <ToggleFormattingBar
+                onClick={jest.fn()}
+                active={false}
+                disabled={false}
+            />,
+        );
+
+        expect(screen.getAllByLabelText('Format letter Case Icon')[0]).toBeInTheDocument();
+    });
+
+    it('should call onClick handler when clicked', () => {
+        const onClick = jest.fn();
+        renderWithContext(
+            <ToggleFormattingBar
+                onClick={onClick}
+                active={false}
+                disabled={false}
+            />,
+        );
+
+        fireEvent.click(screen.getByLabelText('formatting'));
+        expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('should not be clickable when disabled', () => {
+        const onClick = jest.fn();
+        renderWithContext(
+            <ToggleFormattingBar
+                onClick={onClick}
+                active={false}
+                disabled={true}
+            />,
+        );
+
+        fireEvent.click(screen.getByLabelText('formatting'));
+        expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it('should have the correct id based on active prop', () => {
+        renderWithContext(
+            <ToggleFormattingBar
+                onClick={jest.fn()}
+                active={true}
+                disabled={false}
+            />,
+        );
+
+        expect(screen.getByRole('button')).toHaveAttribute('id', 'toggleFormattingBarButton');
+    });
+});
diff --git a/webapp/channels/src/components/advanced_text_editor/toggle_formatting_bar.tsx b/webapp/channels/src/components/advanced_text_editor/toggle_formatting_bar.tsx
index 5e31527993..40b4cbd6cc 100644
--- a/webapp/channels/src/components/advanced_text_editor/toggle_formatting_bar.tsx
+++ b/webapp/channels/src/components/advanced_text_editor/toggle_formatting_bar.tsx
@@ -7,10 +7,7 @@ import {useIntl} from 'react-intl';
 import {ChevronDownIcon, ChevronUpIcon, FormatLetterCaseIcon} from '@mattermost/compass-icons/components';
 
 import KeyboardShortcutSequence, {KEYBOARD_SHORTCUTS} from 'components/keyboard_shortcuts/keyboard_shortcuts_sequence';
-import OverlayTrigger from 'components/overlay_trigger';
-import Tooltip from 'components/tooltip';
-
-import Constants from 'utils/constants';
+import WithTooltip from 'components/with_tooltip';
 
 import {IconContainer} from './formatting_bar/formatting_icon';
 
@@ -26,32 +23,27 @@ const ToggleFormattingBar = (props: ToggleFormattingBarProps): JSX.Element => {
     const buttonAriaLabel = formatMessage({id: 'accessibility.button.formatting', defaultMessage: 'formatting'});
     const iconAriaLabel = formatMessage({id: 'generic_icons.format_letter_case', defaultMessage: 'Format letter Case Icon'});
 
-    const tooltip = active ? (
-        <Tooltip id='toggleFormattingBarButtonTooltip_active'>
-            <KeyboardShortcutSequence
-                shortcut={KEYBOARD_SHORTCUTS.msgHideFormatting}
-                hoistDescription={true}
-                isInsideTooltip={true}
-            />
-        </Tooltip>
+    const title = active ? (
+        <KeyboardShortcutSequence
+            shortcut={KEYBOARD_SHORTCUTS.msgHideFormatting}
+            hoistDescription={true}
+            isInsideTooltip={true}
+        />
     ) : (
-        <Tooltip id='toggleFormattingBarButtonTooltip_inactive'>
-            <KeyboardShortcutSequence
-                shortcut={KEYBOARD_SHORTCUTS.msgShowFormatting}
-                hoistDescription={true}
-                isInsideTooltip={true}
-            />
-        </Tooltip>
+        <KeyboardShortcutSequence
+            shortcut={KEYBOARD_SHORTCUTS.msgShowFormatting}
+            hoistDescription={true}
+            isInsideTooltip={true}
+        />
     );
 
     const ChevronIcon = active ? ChevronUpIcon : ChevronDownIcon;
 
     return (
-        <OverlayTrigger
-            placement='top'
-            delayShow={Constants.OVERLAY_TIME_DELAY}
-            trigger={Constants.OVERLAY_DEFAULT_TRIGGER}
-            overlay={tooltip}
+        <WithTooltip
+            id={active ? 'toggleFormattingBarButtonTooltip_active' : 'toggleFormattingBarButtonTooltip_inactive'}
+            title={title}
+            placement={'top'}
         >
             <IconContainer
                 type='button'
@@ -71,7 +63,7 @@ const ToggleFormattingBar = (props: ToggleFormattingBarProps): JSX.Element => {
                     aria-label={iconAriaLabel}
                 />
             </IconContainer>
-        </OverlayTrigger>
+        </WithTooltip>
     );
 };