Fix(tooltip): width and overflow not working

src/chart/treemap/TreemapSeries.ts

@@ -55,7 +55,7 @@ interface BreadcrumbItemStyleOption extends ItemStyleOption {
 }
 
 interface TreemapSeriesLabelOption extends SeriesLabelOption {
-    ellipsis?: boolean
+    ellipsis?: string,
     formatter?: string | ((params: CallbackDataParams) => string)
 }
 
@@ -306,7 +306,7 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
             upperLabel: {
                 show: true,
                 position: [0, '50%'],
-                ellipsis: true,
+                ellipsis: '...',
                 verticalAlign: 'middle'
             }
         },

src/component/tooltip/TooltipHTMLContent.ts

@@ -17,7 +17,7 @@
 * under the License.
 */
 
-import { isString, indexOf, each, bind, isArray, isDom } from 'zrender/src/core/util';
+import { isString, indexOf, map, each, bind, isArray, isDom, retrieve } from 'zrender/src/core/util';
 import { toHex } from 'zrender/src/tool/color';
 import { normalizeEvent } from 'zrender/src/core/event';
 import { transformLocalCoord } from 'zrender/src/core/dom';
@@ -400,6 +400,30 @@ class TooltipHTMLContent {
                 // it. Although it is not supported by IE8~IE10, fortunately it is a rare
                 // scenario.
                 + `;pointer-events:${this._enterable ? 'auto' : 'none'}`;
+
+            const textStyleModel = tooltipModel.getModel('textStyle');
+            const userWidth = textStyleModel.get('width');
+            if (userWidth != null) {
+                style.cssText += `;width:${userWidth}px;`;
+                // `text-overflow_string` has very humble compatibility
+                // shttps://caniuse.com/mdn-css_properties_text-overflow_string
+                const ellipsis = retrieve(textStyleModel.get('ellipsis'), 'ellipsis');
+                const userOverflow = textStyleModel.get('overflow');
+                if (userOverflow) {
+                    let overflowStyle;
+                    if (userOverflow === 'truncate') {
+                        overflowStyle = `overflow:hidden;text-overflow:${ellipsis};white-space:nowrap;`;
+                    }
+                    else {
+                        const breakMode = userOverflow === 'break'
+                            ? 'break-word'
+                            : userOverflow === 'breakAll'
+                                ? 'break-all' : '';
+                        breakMode && (overflowStyle = `word-break:${breakMode};white-space:normal;`);
+                    }
+                    style.cssText += overflowStyle;
+                }
+            }
         }
 
         this._show = true;

src/component/tooltip/TooltipRichContent.ts

@@ -90,7 +90,7 @@ class TooltipRichContent {
             style: {
                 rich: markupStyleCreator.richTextStyles,
                 text: content as string,
-                lineHeight: 22,
+                lineHeight: +textStyleModel.get('lineHeight') || 22,
                 backgroundColor: tooltipModel.get('backgroundColor'),
                 borderRadius: tooltipModel.get('borderRadius'),
                 borderWidth: 1,
@@ -103,10 +103,15 @@ class TooltipRichContent {
                 textShadowBlur: textStyleModel.get('textShadowBlur') || 0,
                 textShadowOffsetX: textStyleModel.get('textShadowOffsetX') || 0,
                 textShadowOffsetY: textStyleModel.get('textShadowOffsetY') || 0,
-                fill: tooltipModel.get(['textStyle', 'color']),
+                fill: textStyleModel.get('color'),
                 padding: getPaddingFromTooltipModel(tooltipModel, 'richText'),
                 verticalAlign: 'top',
-                align: 'left'
+                align: 'left',
+                width: +textStyleModel.get('width') || null,
+                height: +textStyleModel.get('height') || null,
+                overflow: textStyleModel.get('overflow'),
+                ellipsis: textStyleModel.get('ellipsis'),
+                lineOverflow: textStyleModel.get('lineOverflow')
             },
             z: tooltipModel.get('z')
         });

src/label/labelStyle.ts

@@ -423,6 +423,11 @@ function setTextStyleCommon(
     if (margin != null) {
         textStyle.margin = margin;
     }
+    const ellipsis = textStyleModel.get('ellipsis');
+    if (ellipsis) {
+        textStyle.ellipsis = ellipsis;
+    }
+    textStyle.lineOverflow = textStyleModel.get('lineOverflow');
     setTokenTextStyle(textStyle, textStyleModel, globalTextStyle, opt, isNotNormal, isAttached, true, false);
 }
 // Consider case:

src/util/types.ts

@@ -1358,10 +1358,12 @@ export interface CommonTooltipOption<FormatterParams> {
         'color' | 'fontStyle' | 'fontWeight' | 'fontFamily' | 'fontSize' |
         'lineHeight' | 'width' | 'height' | 'textBorderColor' | 'textBorderWidth' |
         'textShadowColor' | 'textShadowBlur' | 'textShadowOffsetX' | 'textShadowOffsetY'
-        | 'align'> & {
+        | 'align' | 'overflow'> & {
 
         // Available when renderMode is html
         decoration?: string
+        ellipsis?: TextStyleProps['ellipsis']
+        lineOverflow?: TextStyleProps['lineOverflow']
     }
 }