Tooltip style

src/chart/bar/BarView.ts

@@ -26,7 +26,7 @@ import {
     initLabel,
     removeElementWithFadeOut
 } from '../../util/graphic';
-import { getECData } from "../../util/ecData";
+import { getECData } from '../../util/ecData';
 import { enableHoverEmphasis, setStatesStylesFromModel } from '../../util/states';
 import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
 import Path, { PathProps } from 'zrender/src/graphic/Path';

src/chart/map/MapSeries.ts

@@ -210,8 +210,7 @@ class MapSeries extends SeriesModel<MapSeriesOption> {
                 + encodeHTML(name) + ': ' + formattedValue;
         }
 
-        return `<span style="font-size:12px;color:#6e7079;">${seriesNames.join(', ')}</span>`
-            + (seriesNames.length ? '<br />' : '')
+        return `<div style="font-size:12px;color:#6e7079;">${seriesNames.join(', ')}</div>`
             + concatTooltipHtml(name, formattedValue);
     }
 

src/chart/radar/RadarSeries.ts

@@ -138,11 +138,12 @@ class RadarSeriesModel extends SeriesModel<RadarSeriesOption> {
                     return encodeHTML(axis.name) + ': ' + val;
                 }).join('\n');
         }
-        return `<span style="font-size:12px;color:#6e7079;>${encodeHTML(name === '' ? this.name : name)}</span>`
-            + '<br/>'
+        return '<div style="font-size:12px;color:#6e7079;line-height:1">'
+            + encodeHTML(name === '' ? this.name : name)
+            + '</div>'
             + zrUtil.map(indicatorAxes, function (axis) {
                 const val = data.get(data.mapDimension(axis.dim), dataIndex);
-                return '<div style="margin: 8px 0 0;">'
+                return '<div style="margin: 11px 0 0;line-height:1">'
                     + concatTooltipHtml(axis.name, val)
                     + '</div>';
             }).join('');

src/chart/sankey/SankeySeries.ts

@@ -246,7 +246,9 @@ class SankeySeriesModel extends SeriesModel<SankeySeriesOption> {
             if (renderMode === 'richText') {
                 return encodeHTML(rawDataOpt.source + ' -- ' + rawDataOpt.target) + params.value;
             }
-            return concatTooltipHtml(rawDataOpt.source + ' -- ' + rawDataOpt.target, params.value || '');
+            return '<div style="line-height:1">'
+                + concatTooltipHtml(rawDataOpt.source + ' -- ' + rawDataOpt.target, params.value || '')
+                + '</div>';
         }
         else if (dataType === 'node') {
             const node = this.getGraph().getNodeByIndex(dataIndex);
@@ -255,7 +257,9 @@ class SankeySeriesModel extends SeriesModel<SankeySeriesOption> {
             if (renderMode === 'richText') {
                 return encodeHTML(value ? name : '') + ': ' + (value || '');
             }
-            return concatTooltipHtml(value ? name : '', value || '');
+            return '<div style="line-height:1">'
+                + concatTooltipHtml(value ? name : '', value || '')
+                + '</div>';
         }
         return super.formatTooltip(dataIndex, multipleSeries, dataType, renderMode);
     }

src/chart/themeRiver/ThemeRiverSeries.ts

@@ -305,7 +305,7 @@ class ThemeRiverSeriesModel extends SeriesModel<ThemeRiverSeriesOption> {
         if (renderMode === 'richText') {
             return encodeHTML(htmlName) + ': ' + htmlValue;
         }
-        return '<div style="margin: 8px 0 0;">'
+        return '<div style="margin: 11px 0 0;line-height:1">'
             + concatTooltipHtml(htmlName, htmlValue)
             + '</div>';
     }

src/chart/tree/TreeSeries.ts

@@ -224,7 +224,9 @@ class TreeSeriesModel extends SeriesModel<TreeSeriesOption> {
             return encodeHTML(name) + ': ' + ((isNaN(value as number) || value == null) ? '' : value);
         }
 
-        return concatTooltipHtml(name, (isNaN(value as number) || value == null) ? '' : value);
+        return '<div style="line-height:1">'
+            + concatTooltipHtml(name, (isNaN(value as number) || value == null) ? '' : value)
+            + '</div>';
     }
 
     static defaultOption: TreeSeriesOption = {

src/chart/treemap/TreemapSeries.ts

@@ -395,7 +395,9 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
         if (renderMode === 'richText') {
             return encodeHTML(name) + ': ' + formattedValue;
         }
-        return concatTooltipHtml(name, formattedValue);
+        return '<div style="line-height:1">'
+            + concatTooltipHtml(name, formattedValue)
+            + '</div>';
     }
 
     /**

src/component/geo/GeoView.ts

@@ -24,7 +24,7 @@ import GlobalModel from '../../model/Global';
 import ExtensionAPI from '../../ExtensionAPI';
 import GeoModel from '../../coord/geo/GeoModel';
 import { Payload, ZRElementEvent, ECEventData } from '../../util/types';
-import { getECData } from "../../util/ecData";
+import { getECData } from '../../util/ecData';
 import { enterSelect, leaveSelect } from '../../util/states';
 
 class GeoView extends ComponentView {

src/component/marker/MarkPointView.ts

@@ -31,7 +31,7 @@ import GlobalModel from '../../model/Global';
 import MarkerModel from './MarkerModel';
 import ExtensionAPI from '../../ExtensionAPI';
 import { HashMap, isFunction, map, defaults, filter, curry } from 'zrender/src/core/util';
-import { getECData } from "../../util/ecData";
+import { getECData } from '../../util/ecData';
 import { getVisualFromData } from '../../visual/helper';
 import { ZRColor } from '../../util/types';
 

src/component/marker/MarkerModel.ts

@@ -209,16 +209,16 @@ abstract class MarkerModel<Opts extends MarkerOption = MarkerOption> extends Com
         const formattedValue = zrUtil.isArray(value)
             ? zrUtil.map(value, addCommas).join(', ') : addCommas(value as number);
         const name = encodeHTML(data.getName(dataIndex));
-        let html = encodeHTML(this.name);
+        let html = `<div style="font-size:12px;line-height:1;margin:0 0 8px 0;">${encodeHTML(this.name)}</div>`;
         if (value != null || name) {
-            html += renderMode === 'html' ? '<br />' : '\n';
+            html += renderMode === 'html' ? '' : '\n';
         }
         if (name) {
-            html += name;
+            html += `<div style="line-height:1"><span style="font-size:12px;color:#6e7079;">${name}</span>`;
         }
         if (value != null) {
             html = renderMode === 'html'
-                ? concatTooltipHtml(html, formattedValue, true)
+                ? concatTooltipHtml(html, formattedValue, true) + (name ? '</div>' : '')
                 : (html + formattedValue);
         }
         return html;

src/component/tooltip/TooltipModel.ts

@@ -129,7 +129,7 @@ class TooltipModel extends ComponentModel<TooltipOption> {
 
         // Tooltip inside padding, default is 5 for all direction
         // Array is allowed to set up, right, bottom, left, same with css
-        padding: [4, 10, 10],
+        padding: [6, 10, 10],
 
         // Extra css text
         extraCssText: '',

src/component/tooltip/TooltipView.ts

@@ -626,8 +626,8 @@ class TooltipView extends ComponentView {
                         (
                             firstLine
                                 ? (
-                                    '<span style="font-size:12px;color:#6e7079;">'
-                                    + formatUtil.encodeHTML(firstLine) + '</span>'
+                                    '<div style="font-size:12px;color:#6e7079;line-height:1">'
+                                    + formatUtil.encodeHTML(firstLine) + '</div>'
                                     + newLine
                                 )
                                 : ''

src/data/List.ts

@@ -38,7 +38,7 @@ import {
 } from '../util/types';
 import {parseDate} from '../util/number';
 import {isDataItemOption} from '../util/model';
-import { getECData } from "../util/ecData";
+import { getECData } from '../util/ecData';
 import { PathStyleProps } from 'zrender/src/graphic/Path';
 import type Graph from './Graph';
 import type Tree from './Tree';

src/label/LabelManager.ts

@@ -26,7 +26,7 @@ import {
     updateProps,
     initProps
 } from '../util/graphic';
-import { getECData } from "../util/ecData";
+import { getECData } from '../util/ecData';
 import ExtensionAPI from '../ExtensionAPI';
 import {
     ZRTextAlign,

src/model/Series.ts

@@ -553,15 +553,19 @@ class SeriesModel<Opt extends SeriesOption = SeriesOption> extends ComponentMode
         colorStr = zrUtil.isString(colorEl) ? colorEl : colorEl.content;
         let html = '';
         if (!isRichText) {
-            seriesName = seriesName ? `<span style="font-size:12px;color:#6e7079;">${seriesName}</span>` : '';
+            seriesName = seriesName
+                ? !multipleSeries
+                ? `<div style="font-size:12px;color:#6e7079;line-height:1">${seriesName}</div>`
+                : `<span style="font-size:12px;color:#6e7079;line-height:1">${seriesName}</span>`
+                : '';
             html = !multipleSeries
-                ? seriesName + (seriesName ? '<br/>' : '') + `<div style="margin: ${seriesName ? 8 : 0}px 0 0;">`
+                ? seriesName + `<div style="margin: ${seriesName ? 8 : 0}px 0 0;line-height:1">`
                     + colorStr
                     + (name
                         ? `<span style="font-size:12px;color:#6e7079;">${encodeHTML(name)}</span>${content}`
                         : content
                     ) + '</div>'
-                : `<div style="margin: 8px 0 0;">${colorStr}${seriesName}${content}</div>`;
+                : `<div style="margin: 11px 0 0;line-height:1;">${colorStr}${seriesName}${content}</div>`;
         }
         else {
             html = !multipleSeries

src/util/format.ts

@@ -68,7 +68,7 @@ export function encodeHTML(source: string): string {
 
 export function concatTooltipHtml(html: string, value: unknown, dontEncodeHtml?: boolean): string {
     return (dontEncodeHtml ? html : `<span style="font-size:12px;color:#6e7079;">${encodeHTML(html)}</span>`)
-            + (value ? '<span style="float:right;margin-left:20px;color:#464646;font-weight:900;font-size:14px";>' : '')
+            + (value ? '<span style="float:right;margin-left:20px;color:#464646;font-weight:900;font-size:14px;">' : '')
             + encodeHTML(value as string)
             + (value ? '</span>' : '');
 }