From d76f61ad1139ea2c48d23242ca62801f0e6fd1d1 Mon Sep 17 00:00:00 2001
From: Denis Marusevich <dmarusevich@box.com>
Date: Tue, 3 Feb 2026 17:59:19 +0100
Subject: [PATCH] fix(share-link): tooltip adjustment

- provide tooltip class wrapper to force elements occupy full width
---
 .../pill-selector-dropdown/PillSelector.js    | 11 ++++++-
 .../PillSelectorDropdown.js                   |  4 +++
 .../__tests__/PillSelector.test.js            | 14 +++++++++
 .../__tests__/PillSelectorDropdown.test.js    |  8 +++++
 src/components/text-area/TextArea.js          |  4 +++
 .../text-area/__tests__/TextArea.test.js      |  9 ++++++
 .../__snapshots__/TextArea.test.js.snap       | 16 +++++-----
 .../shared-link-modal/EmailSharedLink.js      |  2 ++
 .../shared-link-modal/EmailSharedLink.scss    |  4 +++
 .../__tests__/EmailSharedLink.test.js         |  2 ++
 .../unified-share-modal/ContactsField.js      |  4 +++
 src/features/unified-share-modal/EmailForm.js | 19 +++++-------
 .../UnifiedShareModal.scss                    |  4 +++
 .../__tests__/ContactsField.test.js           | 17 +++++++---
 .../__tests__/EmailForm.test.js               |  8 +++++
 .../__snapshots__/EmailForm.test.js.snap      | 31 +++++++++++++++++++
 16 files changed, 132 insertions(+), 25 deletions(-)

diff --git a/src/components/pill-selector-dropdown/PillSelector.js b/src/components/pill-selector-dropdown/PillSelector.js
index 2abe22ea68..a86471a392 100644
--- a/src/components/pill-selector-dropdown/PillSelector.js
+++ b/src/components/pill-selector-dropdown/PillSelector.js
@@ -47,6 +47,8 @@ type Props = {
     suggestedPillsData?: Array<Object>,
     suggestedPillsFilter?: SuggestedPillsFilter,
     suggestedPillsTitle?: string,
+    /** A CSS class for the tooltip's target wrapper element */
+    tooltipWrapperClassName?: string,
     validator: (option: Option | OptionValue) => boolean,
 };
 
@@ -211,6 +213,7 @@ class PillSelectorBase extends React.Component<Props, State> {
             suggestedPillsData,
             suggestedPillsFilter,
             suggestedPillsTitle,
+            tooltipWrapperClassName,
             validator,
             ...rest
         } = this.props;
@@ -231,7 +234,13 @@ class PillSelectorBase extends React.Component<Props, State> {
         };
 
         return (
-            <Tooltip isShown={hasError} text={error || ''} position={errorTooltipPosition} theme="error">
+            <Tooltip
+                isShown={hasError}
+                position={errorTooltipPosition}
+                targetWrapperClassName={tooltipWrapperClassName}
+                text={error || ''}
+                theme="error"
+            >
                 {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
                 <span
                     className={classes}
diff --git a/src/components/pill-selector-dropdown/PillSelectorDropdown.js b/src/components/pill-selector-dropdown/PillSelectorDropdown.js
index c31e908aad..5763c6f66a 100644
--- a/src/components/pill-selector-dropdown/PillSelectorDropdown.js
+++ b/src/components/pill-selector-dropdown/PillSelectorDropdown.js
@@ -81,6 +81,8 @@ type Props = {
     suggestedPillsFilter?: SuggestedPillsFilter,
     /** String describes the suggested pills */
     suggestedPillsTitle?: string,
+    /** A CSS class for the tooltip's target wrapper element */
+    tooltipWrapperClassName?: string,
     /** Validate the given input value, and update `error` prop if necessary */
     validateForError?: Function,
     /** Called to check if pill item data is valid. The `item` is passed in. */
@@ -258,6 +260,7 @@ class PillSelectorDropdown extends React.Component<Props, State> {
             suggestedPillsFilter,
             suggestedPillsTitle,
             shouldSetActiveItemOnOpen,
+            tooltipWrapperClassName,
             validator,
         } = this.props;
 
@@ -295,6 +298,7 @@ class PillSelectorDropdown extends React.Component<Props, State> {
                         suggestedPillsData={suggestedPillsData}
                         suggestedPillsFilter={suggestedPillsFilter}
                         suggestedPillsTitle={suggestedPillsTitle}
+                        tooltipWrapperClassName={tooltipWrapperClassName}
                         validator={validator}
                         value={this.state.inputValue}
                     />
diff --git a/src/components/pill-selector-dropdown/__tests__/PillSelector.test.js b/src/components/pill-selector-dropdown/__tests__/PillSelector.test.js
index 6b42d6e7f4..e28e7f0851 100644
--- a/src/components/pill-selector-dropdown/__tests__/PillSelector.test.js
+++ b/src/components/pill-selector-dropdown/__tests__/PillSelector.test.js
@@ -88,6 +88,20 @@ describe('components/pill-selector-dropdown/PillSelector', () => {
             expect(wrapper.find('.show-error').length).toBe(0);
         });
 
+        test('should pass tooltipWrapperClassName to Tooltip as targetWrapperClassName when provided', () => {
+            const tooltipWrapperClassName = 'custom-tooltip-wrapper';
+            const wrapper = shallow(
+                <PillSelector
+                    error="error"
+                    onInput={onInputStub}
+                    onRemove={onRemoveStub}
+                    tooltipWrapperClassName={tooltipWrapperClassName}
+                />,
+            );
+
+            expect(wrapper.find('Tooltip').prop('targetWrapperClassName')).toBe(tooltipWrapperClassName);
+        });
+
         test('should render pills when there are selected options using legacy text attribute', () => {
             const options = [
                 { text: 'test', value: 'test' },
diff --git a/src/components/pill-selector-dropdown/__tests__/PillSelectorDropdown.test.js b/src/components/pill-selector-dropdown/__tests__/PillSelectorDropdown.test.js
index 90be881378..f88f51077a 100644
--- a/src/components/pill-selector-dropdown/__tests__/PillSelectorDropdown.test.js
+++ b/src/components/pill-selector-dropdown/__tests__/PillSelectorDropdown.test.js
@@ -56,6 +56,14 @@ describe('components/pill-selector-dropdown/PillSelectorDropdown', () => {
             expect(pillSelector.dive().instance().props.value).toEqual('value');
         });
 
+        test('should pass tooltipWrapperClassName to PillSelector when provided', () => {
+            const tooltipWrapperClassName = 'custom-tooltip-wrapper';
+            const wrapper = getWrapper({ tooltipWrapperClassName });
+            const selectorElement = wrapper.find('SelectorDropdown').prop('selector');
+
+            expect(selectorElement.props.tooltipWrapperClassName).toBe(tooltipWrapperClassName);
+        });
+
         test('should render disabled pill selector', () => {
             const wrapper = getWrapper({ disabled: true });
 
diff --git a/src/components/text-area/TextArea.js b/src/components/text-area/TextArea.js
index a56b9e66b6..16d0382900 100644
--- a/src/components/text-area/TextArea.js
+++ b/src/components/text-area/TextArea.js
@@ -28,6 +28,8 @@ type Props = {
     textareaRef?: Function, // @TODO: eventually rename to innerRef for consistancy across all form elements
     /** A CSS class for the tooltip's tether element component */
     tooltipTetherClassName?: string,
+    /** A CSS class for the tooltip's target wrapper element */
+    tooltipWrapperClassName?: string,
 };
 
 const TextArea = ({
@@ -42,6 +44,7 @@ const TextArea = ({
     label,
     textareaRef,
     tooltipTetherClassName,
+    tooltipWrapperClassName,
     ...rest
 }: Props) => {
     const hasError = !!error;
@@ -70,6 +73,7 @@ const TextArea = ({
                 <Tooltip
                     isShown={hasError}
                     position={errorTooltipPosition || 'bottom-left'}
+                    targetWrapperClassName={tooltipWrapperClassName}
                     tetherElementClassName={tooltipTetherClassName}
                     text={error || ''}
                     theme="error"
diff --git a/src/components/text-area/__tests__/TextArea.test.js b/src/components/text-area/__tests__/TextArea.test.js
index 8b7a3fcadc..6652652f60 100644
--- a/src/components/text-area/__tests__/TextArea.test.js
+++ b/src/components/text-area/__tests__/TextArea.test.js
@@ -80,6 +80,15 @@ describe('components/text-area/TextArea', () => {
         wrapper.unmount();
     });
 
+    test('should pass tooltipWrapperClassName to Tooltip as targetWrapperClassName when provided', () => {
+        const tooltipWrapperClassName = 'custom-tooltip-wrapper';
+        const wrapper = shallow(
+            <TextArea error="error" label="label" tooltipWrapperClassName={tooltipWrapperClassName} />,
+        );
+
+        expect(wrapper.find('Tooltip').prop('targetWrapperClassName')).toBe(tooltipWrapperClassName);
+    });
+
     test('should not show optional text when hideOptionalLabel is true', () => {
         const wrapper = shallow(<TextArea label="label" hideOptionalLabel />);
         expect(wrapper).toMatchSnapshot();
diff --git a/src/components/text-area/__tests__/__snapshots__/TextArea.test.js.snap b/src/components/text-area/__tests__/__snapshots__/TextArea.test.js.snap
index f796fe2022..0bd4512271 100644
--- a/src/components/text-area/__tests__/__snapshots__/TextArea.test.js.snap
+++ b/src/components/text-area/__tests__/__snapshots__/TextArea.test.js.snap
@@ -18,7 +18,7 @@ exports[`components/text-area/TextArea should not show optional text when hideOp
       theme="error"
     >
       <textarea
-        aria-errormessage="errorMessage22"
+        aria-errormessage="errorMessage24"
         aria-invalid={false}
         style={
           {
@@ -29,7 +29,7 @@ exports[`components/text-area/TextArea should not show optional text when hideOp
     </Tooltip>
     <span
       className="accessibility-hidden"
-      id="errorMessage22"
+      id="errorMessage24"
       role="alert"
     />
   </Label>
@@ -46,7 +46,7 @@ exports[`components/text-area/TextArea should render text area with description
   >
     <div
       className="text-area-description"
-      id="description27"
+      id="description29"
     >
       some description
     </div>
@@ -60,8 +60,8 @@ exports[`components/text-area/TextArea should render text area with description
       theme="error"
     >
       <textarea
-        aria-describedby="description27"
-        aria-errormessage="errorMessage26"
+        aria-describedby="description29"
+        aria-errormessage="errorMessage28"
         aria-invalid={false}
         style={
           {
@@ -72,7 +72,7 @@ exports[`components/text-area/TextArea should render text area with description
     </Tooltip>
     <span
       className="accessibility-hidden"
-      id="errorMessage26"
+      id="errorMessage28"
       role="alert"
     />
   </Label>
@@ -97,7 +97,7 @@ exports[`components/text-area/TextArea should show optional text when hideOption
       theme="error"
     >
       <textarea
-        aria-errormessage="errorMessage24"
+        aria-errormessage="errorMessage26"
         aria-invalid={false}
         style={
           {
@@ -108,7 +108,7 @@ exports[`components/text-area/TextArea should show optional text when hideOption
     </Tooltip>
     <span
       className="accessibility-hidden"
-      id="errorMessage24"
+      id="errorMessage26"
       role="alert"
     />
   </Label>
diff --git a/src/features/shared-link-modal/EmailSharedLink.js b/src/features/shared-link-modal/EmailSharedLink.js
index 11a06b954d..bfe22a6977 100644
--- a/src/features/shared-link-modal/EmailSharedLink.js
+++ b/src/features/shared-link-modal/EmailSharedLink.js
@@ -187,6 +187,7 @@ class EmailSharedLink extends Component {
                     placeholder={formatMessage(commonMessages.pillSelectorPlaceholder)}
                     selectedOptions={selectedOptions}
                     selectorOptions={selectorOptions}
+                    tooltipWrapperClassName="bdl-EmailSharedLink-tooltipWrapper"
                     validateForError={this.validateForError}
                     validator={this.validator}
                 >
@@ -199,6 +200,7 @@ class EmailSharedLink extends Component {
                     label={<FormattedMessage {...messages.messageTitle} />}
                     onChange={this.handleMessageChange}
                     rows={3}
+                    tooltipWrapperClassName="bdl-EmailSharedLink-tooltipWrapper"
                     value={emailMessage}
                 />
                 {isExpanded && (
diff --git a/src/features/shared-link-modal/EmailSharedLink.scss b/src/features/shared-link-modal/EmailSharedLink.scss
index ff401d5ba2..46278dfe60 100644
--- a/src/features/shared-link-modal/EmailSharedLink.scss
+++ b/src/features/shared-link-modal/EmailSharedLink.scss
@@ -22,6 +22,10 @@
         transition: height 0.2s;
     }
 
+    .bdl-EmailSharedLink-tooltipWrapper {
+        width: 100%;
+    }
+
     .bdl-PillSelector,
     textarea {
         width: 100%;
diff --git a/src/features/shared-link-modal/__tests__/EmailSharedLink.test.js b/src/features/shared-link-modal/__tests__/EmailSharedLink.test.js
index 7bb4535622..709537bd68 100644
--- a/src/features/shared-link-modal/__tests__/EmailSharedLink.test.js
+++ b/src/features/shared-link-modal/__tests__/EmailSharedLink.test.js
@@ -324,10 +324,12 @@ describe('features/shared-link-modal/EmailSharedLink', () => {
             expect(pillSelector.length).toBe(1);
             expect(pillSelector.find('ContactDatalistItem').length).toBe(11);
             expect(pillSelector.prop('inputProps')['data-resin-thing']).toEqual('hey');
+            expect(pillSelector.prop('tooltipWrapperClassName')).toBe('bdl-EmailSharedLink-tooltipWrapper');
             pillSelector.prop('inputProps').onFocus(); // should call props.onExpand
 
             const textArea = wrapper.find('TextArea');
             expect(textArea.length).toBe(1);
+            expect(textArea.prop('tooltipWrapperClassName')).toBe('bdl-EmailSharedLink-tooltipWrapper');
         });
 
         test('should add is-expanded class to form and show buttons when props.isExpanded is true', () => {
diff --git a/src/features/unified-share-modal/ContactsField.js b/src/features/unified-share-modal/ContactsField.js
index a3e2657a8b..c8815193e3 100644
--- a/src/features/unified-share-modal/ContactsField.js
+++ b/src/features/unified-share-modal/ContactsField.js
@@ -25,6 +25,8 @@ type Props = {
     getPillClassName?: (option: SelectOptionProp) => string,
     intl: any,
     label: React.Node,
+    /** A CSS class for the tooltip's target wrapper element */
+    tooltipWrapperClassName?: string,
     onContactAdd: Function,
     onContactRemove: Function,
     onInput?: Function,
@@ -175,6 +177,7 @@ class ContactsField extends React.Component<Props, State> {
             onPillCreate,
             selectedContacts,
             showContactAvatars,
+            tooltipWrapperClassName,
             validateForError,
             validator,
         } = this.props;
@@ -213,6 +216,7 @@ class ContactsField extends React.Component<Props, State> {
                 showAvatars
                 showRoundedPills
                 selectorOptions={contacts}
+                tooltipWrapperClassName={tooltipWrapperClassName}
                 validateForError={validateForError}
                 validator={validator}
             >
diff --git a/src/features/unified-share-modal/EmailForm.js b/src/features/unified-share-modal/EmailForm.js
index b445603701..f033e32446 100644
--- a/src/features/unified-share-modal/EmailForm.js
+++ b/src/features/unified-share-modal/EmailForm.js
@@ -103,10 +103,8 @@ class EmailForm extends React.Component<Props, State> {
         const { isRestrictionJustificationEnabled } = this.props;
         const { isRestrictionJustificationEnabled: prevIsRestrictionJustificationEnabled } = prevProps;
         const { contactsFieldError, contactsRestrictionError } = this.state;
-        const {
-            contactsFieldError: prevContactsFieldError,
-            contactsRestrictionError: prevContactsRestrictionError,
-        } = prevState;
+        const { contactsFieldError: prevContactsFieldError, contactsRestrictionError: prevContactsRestrictionError } =
+            prevState;
 
         // Only display one type of error at a time and give preference
         // to the one triggered most recently
@@ -189,13 +187,8 @@ class EmailForm extends React.Component<Props, State> {
     validateContactsRestrictions = () => {
         let contactsRestrictionError = '';
         const { selectedJustificationReason } = this.state;
-        const {
-            intl,
-            isRestrictionJustificationEnabled,
-            selectedContacts,
-            restrictedEmails,
-            restrictedGroups,
-        } = this.props;
+        const { intl, isRestrictionJustificationEnabled, selectedContacts, restrictedEmails, restrictedGroups } =
+            this.props;
 
         const hasRestrictedCollabs = hasRestrictedContacts(selectedContacts, restrictedEmails, restrictedGroups);
         const isMissingRequiredJustification = isRestrictionJustificationEnabled && !selectedJustificationReason;
@@ -395,6 +388,7 @@ class EmailForm extends React.Component<Props, State> {
             isShown: showEnterEmailsCallout,
             position: 'middle-right',
             showCloseButton: true,
+            targetWrapperClassName: 'bdl-UnifiedShareModal-tooltipWrapper',
             text: <FormattedMessage {...messages.enterEmailAddressesCalloutText} />,
             theme: 'callout',
         };
@@ -402,6 +396,7 @@ class EmailForm extends React.Component<Props, State> {
         const recommendedSharingTooltipProps = {
             isShown: !!recommendedSharingTooltipCalloutName,
             position: 'middle-left',
+            targetWrapperClassName: 'bdl-UnifiedShareModal-tooltipWrapper',
             text: (
                 <FormattedMessage
                     {...messages.recommendedSharingTooltipCalloutText}
@@ -432,6 +427,7 @@ class EmailForm extends React.Component<Props, State> {
                         onPillCreate={onPillCreate}
                         selectedContacts={selectedContacts}
                         suggestedCollaborators={suggestedCollaborators}
+                        tooltipWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
                         validateForError={this.validateContactField}
                         validator={this.isValidContactPill}
                         showContactAvatars
@@ -490,6 +486,7 @@ class EmailForm extends React.Component<Props, State> {
                         onChange={this.handleMessageChange}
                         placeholder={intl.formatMessage(commonMessages.messageSelectorPlaceholder)}
                         rows={3}
+                        tooltipWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
                         value={message}
                         {...messageProps}
                     />
diff --git a/src/features/unified-share-modal/UnifiedShareModal.scss b/src/features/unified-share-modal/UnifiedShareModal.scss
index ac97a4ed58..4cefa5e753 100644
--- a/src/features/unified-share-modal/UnifiedShareModal.scss
+++ b/src/features/unified-share-modal/UnifiedShareModal.scss
@@ -51,6 +51,10 @@
     display: block;
 }
 
+.bdl-UnifiedShareModal-tooltipWrapper {
+    width: 100%;
+}
+
 .usm-ftux-toggle-tooltip-target {
     flex: 1;
 }
diff --git a/src/features/unified-share-modal/__tests__/ContactsField.test.js b/src/features/unified-share-modal/__tests__/ContactsField.test.js
index 2f8c7d1f2b..b38e497167 100644
--- a/src/features/unified-share-modal/__tests__/ContactsField.test.js
+++ b/src/features/unified-share-modal/__tests__/ContactsField.test.js
@@ -67,7 +67,7 @@ describe('features/unified-share-modal/ContactsField', () => {
 
     const suggestions = {
         // expectedContacts[1]
-        '23456': {
+        23456: {
             id: '23456',
             userScore: 0.5,
             email: 'y@example.com',
@@ -76,7 +76,7 @@ describe('features/unified-share-modal/ContactsField', () => {
             isExternalUser: false,
         },
         // expectedContacts[2]
-        '34567': {
+        34567: {
             id: '34567',
             userScore: 0.1,
             email: 'z@example.com',
@@ -183,7 +183,7 @@ describe('features/unified-share-modal/ContactsField', () => {
             expect(addSuggestedContactsMock).not.toHaveBeenCalled();
 
             wrapper.setProps({
-                suggestedCollaborators: { '12345': { id: 12345 }, '23456': { id: 23456 } },
+                suggestedCollaborators: { 12345: { id: 12345 }, 23456: { id: 23456 } },
             });
 
             wrapper.instance().filterContacts(contactsFromServer);
@@ -376,7 +376,7 @@ describe('features/unified-share-modal/ContactsField', () => {
         test('should pass overlayTitle when there are suggested collabs', async () => {
             const wrapper = getWrapper({
                 getContacts,
-                suggestedCollaborators: { '12': { id: 12, userScore: 1 } },
+                suggestedCollaborators: { 12: { id: 12, userScore: 1 } },
             });
 
             wrapper.setState({ pillSelectorInputValue: 'a' });
@@ -388,7 +388,7 @@ describe('features/unified-share-modal/ContactsField', () => {
         test('should render divider at the correct index when there are suggested collabs', async () => {
             const wrapper = getWrapper({
                 getContacts,
-                suggestedCollaborators: { '12': { id: 12, userScore: 1 } },
+                suggestedCollaborators: { 12: { id: 12, userScore: 1 } },
             });
 
             wrapper.setState({ pillSelectorInputValue: 'a' });
@@ -396,5 +396,12 @@ describe('features/unified-share-modal/ContactsField', () => {
 
             expect(wrapper.find('PillSelectorDropdown').props().dividerIndex).toBe(1);
         });
+
+        test('should pass tooltipWrapperClassName to PillSelectorDropdown when provided', () => {
+            const tooltipWrapperClassName = 'bdl-UnifiedShareModal-tooltipWrapper';
+            const wrapper = getWrapper({ tooltipWrapperClassName });
+
+            expect(wrapper.find('PillSelectorDropdown').prop('tooltipWrapperClassName')).toBe(tooltipWrapperClassName);
+        });
     });
 });
diff --git a/src/features/unified-share-modal/__tests__/EmailForm.test.js b/src/features/unified-share-modal/__tests__/EmailForm.test.js
index a6c7baa94b..5a5d1f835a 100644
--- a/src/features/unified-share-modal/__tests__/EmailForm.test.js
+++ b/src/features/unified-share-modal/__tests__/EmailForm.test.js
@@ -846,5 +846,13 @@ describe('features/unified-share-modal/EmailForm', () => {
 
             expect(wrapper.find('[data-testid="be-emailform-message"]')).toHaveLength(1);
         });
+
+        test('should pass tooltipWrapperClassName to ContactsField and TextArea for tooltip positioning', () => {
+            const wrapper = getWrapper({ isExpanded: true });
+            const expectedClassName = 'bdl-UnifiedShareModal-tooltipWrapper';
+
+            expect(wrapper.find('ContactsField').prop('tooltipWrapperClassName')).toBe(expectedClassName);
+            expect(wrapper.find('TextArea').prop('tooltipWrapperClassName')).toBe(expectedClassName);
+        });
     });
 });
diff --git a/src/features/unified-share-modal/__tests__/__snapshots__/EmailForm.test.js.snap b/src/features/unified-share-modal/__tests__/__snapshots__/EmailForm.test.js.snap
index 262ab7147d..de4ab240da 100644
--- a/src/features/unified-share-modal/__tests__/__snapshots__/EmailForm.test.js.snap
+++ b/src/features/unified-share-modal/__tests__/__snapshots__/EmailForm.test.js.snap
@@ -16,6 +16,7 @@ exports[`features/unified-share-modal/EmailForm render() should not show inline
       isShown={true}
       position="middle-right"
       showCloseButton={true}
+      targetWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
       text={
         <FormattedMessage
           defaultMessage="Share this item with coworkers by entering their email addresses"
@@ -39,6 +40,7 @@ exports[`features/unified-share-modal/EmailForm render() should not show inline
         onInput={[Function]}
         selectedContacts={[]}
         showContactAvatars={true}
+        tooltipWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
         validateForError={[Function]}
         validator={[Function]}
       />
@@ -63,6 +65,7 @@ exports[`features/unified-share-modal/EmailForm render() should not show inline
       isShown={true}
       position="middle-right"
       showCloseButton={true}
+      targetWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
       text={
         <FormattedMessage
           defaultMessage="Share this item with coworkers by entering their email addresses"
@@ -86,6 +89,7 @@ exports[`features/unified-share-modal/EmailForm render() should not show inline
         onInput={[Function]}
         selectedContacts={[]}
         showContactAvatars={true}
+        tooltipWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
         validateForError={[Function]}
         validator={[Function]}
       />
@@ -115,6 +119,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
       isShown={true}
       position="middle-right"
       showCloseButton={true}
+      targetWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
       text={
         <FormattedMessage
           defaultMessage="Share this item with coworkers by entering their email addresses"
@@ -138,6 +143,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
         onInput={[Function]}
         selectedContacts={[]}
         showContactAvatars={true}
+        tooltipWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
         validateForError={[Function]}
         validator={[Function]}
       />
@@ -170,6 +176,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
         isShown={true}
         position="middle-right"
         showCloseButton={true}
+        targetWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
         text={
           <FormattedMessage
             defaultMessage="Share this item with coworkers by entering their email addresses"
@@ -193,6 +200,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
           onInput={[Function]}
           selectedContacts={[]}
           showContactAvatars={true}
+          tooltipWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
           validateForError={[Function]}
           validator={[Function]}
         />
@@ -210,6 +218,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
     onChange={[Function]}
     placeholder="boxui.share.messageSelectorPlaceholder"
     rows={3}
+    tooltipWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
     value=""
   />
   <ModalActions>
@@ -256,6 +265,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
       isShown={true}
       position="middle-right"
       showCloseButton={true}
+      targetWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
       text={
         <FormattedMessage
           defaultMessage="Share this item with coworkers by entering their email addresses"
@@ -279,6 +289,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
         onInput={[Function]}
         selectedContacts={[]}
         showContactAvatars={true}
+        tooltipWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
         validateForError={[Function]}
         validator={[Function]}
       />
@@ -295,6 +306,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
     onChange={[Function]}
     placeholder="boxui.share.messageSelectorPlaceholder"
     rows={3}
+    tooltipWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
     value=""
   />
   <ModalActions>
@@ -341,6 +353,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
       isShown={true}
       position="middle-right"
       showCloseButton={true}
+      targetWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
       text={
         <FormattedMessage
           defaultMessage="Share this item with coworkers by entering their email addresses"
@@ -364,6 +377,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
         onInput={[Function]}
         selectedContacts={[]}
         showContactAvatars={true}
+        tooltipWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
         validateForError={[Function]}
         validator={[Function]}
       />
@@ -393,6 +407,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
       isShown={true}
       position="middle-right"
       showCloseButton={true}
+      targetWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
       text={
         <FormattedMessage
           defaultMessage="Share this item with coworkers by entering their email addresses"
@@ -416,6 +431,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
         onInput={[Function]}
         selectedContacts={[]}
         showContactAvatars={true}
+        tooltipWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
         validateForError={[Function]}
         validator={[Function]}
       />
@@ -432,6 +448,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
     onChange={[Function]}
     placeholder="boxui.share.messageSelectorPlaceholder"
     rows={3}
+    tooltipWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
     value=""
   />
   <ModalActions>
@@ -483,6 +500,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
       isShown={true}
       position="middle-right"
       showCloseButton={true}
+      targetWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
       text={
         <FormattedMessage
           defaultMessage="Share this item with coworkers by entering their email addresses"
@@ -506,6 +524,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
         onInput={[Function]}
         selectedContacts={[]}
         showContactAvatars={true}
+        tooltipWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
         validateForError={[Function]}
         validator={[Function]}
       />
@@ -522,6 +541,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
     onChange={[Function]}
     placeholder="boxui.share.messageSelectorPlaceholder"
     rows={3}
+    tooltipWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
     value=""
   />
   <ModalActions>
@@ -568,6 +588,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
       isShown={true}
       position="middle-right"
       showCloseButton={true}
+      targetWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
       text={
         <FormattedMessage
           defaultMessage="Share this item with coworkers by entering their email addresses"
@@ -591,6 +612,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
         onInput={[Function]}
         selectedContacts={[]}
         showContactAvatars={true}
+        tooltipWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
         validateForError={[Function]}
         validator={[Function]}
       />
@@ -607,6 +629,7 @@ exports[`features/unified-share-modal/EmailForm render() should render default c
     onChange={[Function]}
     placeholder="boxui.share.messageSelectorPlaceholder"
     rows={3}
+    tooltipWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
     value=""
   />
   <div
@@ -667,6 +690,7 @@ exports[`features/unified-share-modal/EmailForm render() should render tooltip a
       isDisabled={false}
       isShown={true}
       position="middle-left"
+      targetWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
       text={
         <FormattedMessage
           defaultMessage="Based on your usage, we think {fullName} would be interested in this file."
@@ -695,6 +719,7 @@ exports[`features/unified-share-modal/EmailForm render() should render tooltip a
         onInput={[Function]}
         selectedContacts={[]}
         showContactAvatars={true}
+        tooltipWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
         validateForError={[Function]}
         validator={[Function]}
       />
@@ -719,6 +744,7 @@ exports[`features/unified-share-modal/EmailForm render() should render tooltip a
       isShown={true}
       position="middle-right"
       showCloseButton={true}
+      targetWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
       text={
         <FormattedMessage
           defaultMessage="Share this item with coworkers by entering their email addresses"
@@ -742,6 +768,7 @@ exports[`features/unified-share-modal/EmailForm render() should render tooltip a
         onInput={[Function]}
         selectedContacts={[]}
         showContactAvatars={true}
+        tooltipWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
         validateForError={[Function]}
         validator={[Function]}
       />
@@ -766,6 +793,7 @@ exports[`features/unified-share-modal/EmailForm render() should render tooltip a
       isShown={true}
       position="middle-right"
       showCloseButton={true}
+      targetWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
       text={
         <FormattedMessage
           defaultMessage="Share this item with coworkers by entering their email addresses"
@@ -789,6 +817,7 @@ exports[`features/unified-share-modal/EmailForm render() should render tooltip a
         onInput={[Function]}
         selectedContacts={[]}
         showContactAvatars={true}
+        tooltipWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
         validateForError={[Function]}
         validator={[Function]}
       />
@@ -813,6 +842,7 @@ exports[`features/unified-share-modal/EmailForm render() should render tooltip a
       isShown={true}
       position="middle-right"
       showCloseButton={true}
+      targetWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
       text={
         <FormattedMessage
           defaultMessage="Share this item with coworkers by entering their email addresses"
@@ -836,6 +866,7 @@ exports[`features/unified-share-modal/EmailForm render() should render tooltip a
         onInput={[Function]}
         selectedContacts={[]}
         showContactAvatars={true}
+        tooltipWrapperClassName="bdl-UnifiedShareModal-tooltipWrapper"
         validateForError={[Function]}
         validator={[Function]}
       />