diff --git a/packages/gamut/src/Tip/shared/FloatingTip.tsx b/packages/gamut/src/Tip/shared/FloatingTip.tsx
index 76facc8d71..4f3dbfad87 100644
--- a/packages/gamut/src/Tip/shared/FloatingTip.tsx
+++ b/packages/gamut/src/Tip/shared/FloatingTip.tsx
@@ -3,10 +3,13 @@ import { useLayoutEffect, useRef, useState } from 'react';
 import * as React from 'react';
 import { useMeasure } from 'react-use';
 
-import { Box, FlexBox } from '../../Box';
+import { Box } from '../../Box';
 import { PreviewTipContents } from '../PreviewTip/elements';
-import { FloatingTipBody, TargetContainer } from './elements';
-import { narrowWidth } from './styles';
+import {
+  FloatingTipBody,
+  FloatingTipTextWrapper,
+  TargetContainer,
+} from './elements';
 import { TipWrapperProps } from './types';
 import { getAlignmentWidths, getPopoverAlignment, runWithDelay } from './utils';
 
@@ -134,14 +137,14 @@ export const FloatingTip: React.FC<TipWrapperProps> = ({
         variant="secondary"
         widthRestricted={false}
       >
-        <FlexBox
-          alignItems={isHoverType ? undefined : 'flex-start'}
-          flexDirection="column"
+        <FloatingTipTextWrapper
           ref={childRef}
-          width={narrow ? narrowWidth : undefined}
+          isHoverType={isHoverType}
+          narrow={narrow}
+          centered={alignment.includes('center')}
         >
           {contents}
-        </FlexBox>
+        </FloatingTipTextWrapper>
       </FloatingTipBody>
     </Box>
   );
diff --git a/packages/gamut/src/Tip/shared/elements.tsx b/packages/gamut/src/Tip/shared/elements.tsx
index 64fc2cb788..b3c40aa7ec 100644
--- a/packages/gamut/src/Tip/shared/elements.tsx
+++ b/packages/gamut/src/Tip/shared/elements.tsx
@@ -1,12 +1,14 @@
-import { css, timing } from '@codecademy/gamut-styles';
+import { css, states, timing } from '@codecademy/gamut-styles';
 import { StyleProps } from '@codecademy/variance';
 import styled from '@emotion/styled';
 
-import { Box } from '../../Box';
+import { Box, FlexBox } from '../../Box';
 import { Selectors } from '../../ButtonBase/ButtonBase';
 import { Popover } from '../../Popover';
 import {
+  centerWidths,
   inlineToolTipBodyAlignments,
+  narrowWidth,
   toolTipBodyCss,
   toolTipWidthRestrictions,
 } from './styles';
@@ -14,8 +16,24 @@ import {
 const tipWrapperStyles = {
   position: 'relative',
   display: 'inline-flex',
+  overflowWrap: 'break-word',
 } as const;
 
+const floatingTipTextStates = states({
+  isHoverType: { alignItems: 'flexStart' },
+  narrow: { width: narrowWidth },
+  centered: {
+    ...centerWidths,
+  },
+});
+
+export const FloatingTipTextWrapper = styled(FlexBox)<
+  StyleProps<typeof floatingTipTextStates>
+>(
+  css({ flexDirection: 'column', overflowWrap: 'break-word' }),
+  floatingTipTextStates
+);
+
 export const ToolTipWrapper = styled.div(
   css({
     '&:hover > div, &:focus-within > div': {