fix(comp:tooltip): tooltip content should wrap on line break (#1876)

IDuxFE · Apr 8, 2024 · ab4a449 · ab4a449
1 parent 818722e
commit ab4a449
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 0 deletions.
diff --git a/packages/components/tooltip/docs/Theme.zh.md b/packages/components/tooltip/docs/Theme.zh.md
@@ -4,3 +4,4 @@
 | `fontSize` |  | `number` | `12` | `12` |
 | `maxWidth` |  | `number` | `400` | `400` |
 | `minWidth` |  | `number` | `32` | `32` |
+| `whiteSpace` |  | `string` | `pre-wrap` | `pre-wrap` |
diff --git a/packages/components/tooltip/style/index.less b/packages/components/tooltip/style/index.less
@@ -12,6 +12,7 @@
   &-wrapper {
     position: relative;
     word-wrap: break-word;
+    white-space: var(--ix-tooltip-white-space);
     min-width: var(--ix-tooltip-min-width);
     max-width: var(--ix-tooltip-max-width);
     padding: var(--ix-padding-size-xs) var(--ix-padding-size-sm);

diff --git a/packages/components/tooltip/theme/dark.css b/packages/components/tooltip/theme/dark.css
@@ -4,4 +4,5 @@
   --ix-tooltip-color: #808999;
   --ix-tooltip-min-width: 32px;
   --ix-tooltip-max-width: 400px;
+  --ix-tooltip-white-space: pre-wrap;
 }
diff --git a/packages/components/tooltip/theme/default.css b/packages/components/tooltip/theme/default.css
@@ -4,4 +4,5 @@
   --ix-tooltip-color: #6f7785;
   --ix-tooltip-min-width: 32px;
   --ix-tooltip-max-width: 400px;
+  --ix-tooltip-white-space: pre-wrap;
 }
diff --git a/packages/components/tooltip/theme/default.ts b/packages/components/tooltip/theme/default.ts
@@ -15,5 +15,7 @@ export function getDefaultThemeTokens(tokens: GlobalThemeTokens): CertainThemeTo
 
     minWidth: 32,
     maxWidth: 400,
+
+    whiteSpace: 'pre-wrap',
   }
 }
diff --git a/packages/components/tooltip/theme/tokens.ts b/packages/components/tooltip/theme/tokens.ts
@@ -11,4 +11,6 @@ export interface TooltipThemeTokens {
 
   minWidth: number
   maxWidth: number
+
+  whiteSpace: string
 }