Tooltip: break word in title and description (#8101)

Добавляем перенос строки, если неразрывный текст в Tooltip слишком длинный и не помещается по ширине.
VKCOM · Dec 18, 2024 · a0141db · a0141db
1 parent da90d19
commit a0141db
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/packages/vkui/src/components/Tooltip/Tooltip.tsx b/packages/vkui/src/components/Tooltip/Tooltip.tsx
@@ -56,7 +56,7 @@ export type TooltipOnShownChange = OnShownChange;
 export interface TooltipProps extends AllowedFloatingComponentProps, AllowedTooltipBaseProps {
   /**
    * Передача `boolean` позволяет контролировать состояния показа и скрытия вручную. Используйте
-   * совместно с `onShawnChange`.
+   * совместно с `onShownChange`.
    *
    * > Если нужно разово инициировать показ тултипа при первом рендере, то используйте `defaultShown`.
    */

diff --git a/packages/vkui/src/components/TooltipBase/TooltipBase.module.css b/packages/vkui/src/components/TooltipBase/TooltipBase.module.css
@@ -25,6 +25,11 @@
   background: none;
 }
 
+.title,
+.description {
+  word-break: break-word;
+}
+
 .arrow {
   color: var(--vkui--color_background_contrast_themed);
 }

diff --git a/packages/vkui/src/components/TooltipBase/TooltipBase.tsx b/packages/vkui/src/components/TooltipBase/TooltipBase.tsx
@@ -110,8 +110,14 @@ export const TooltipBase = ({
       )}
       <div className={styles.content} style={maxWidth !== null ? { maxWidth } : undefined}>
         <div>
-          {hasReactNode(title) && <Subhead weight="2">{title}</Subhead>}
-          {hasReactNode(description) && <Subhead>{description}</Subhead>}
+          {hasReactNode(title) && (
+            <Subhead className={styles.title} weight="2">
+              {title}
+            </Subhead>
+          )}
+          {hasReactNode(description) && (
+            <Subhead className={styles.description}>{description}</Subhead>
+          )}
         </div>
         {typeof onCloseIconClick === 'function' && (
           <Tappable