Tooltip style change

src/chart/map/MapSeries.ts

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

src/chart/radar/RadarSeries.ts

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

src/component/tooltip/TooltipModel.ts

@@ -113,10 +113,10 @@ class TooltipModel extends ComponentModel<TooltipOption> {
         backgroundColor: '#fff',
 
         // box shadow
-        shadowBlur: 5,
-        shadowColor: '#333',
-        shadowOffsetX: 0,
-        shadowOffsetY: 0,
+        shadowBlur: 10,
+        shadowColor: 'rgba(0, 0, 0, .2)',
+        shadowOffsetX: 1,
+        shadowOffsetY: 2,
 
         // tooltip border color
         borderColor: '#333',
@@ -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: [8, 12],
+        padding: [4, 10, 10],
 
         // Extra css text
         extraCssText: '',

src/component/tooltip/TooltipView.ts

@@ -622,7 +622,7 @@ class TooltipView extends ComponentView {
                 }
                 else {
                     singleDefaultHTML.push(
-                        (firstLine ? formatUtil.encodeHTML(firstLine) + newLine : '')
+                        (firstLine ? `<span style="font-size:12px;color:#6e7079;">${formatUtil.encodeHTML(firstLine)}</span>` + newLine : '')
                         + seriesDefaultHTML.reverse().join(newLine)
                     );
                 }
@@ -791,7 +791,8 @@ class TooltipView extends ComponentView {
         let html = defaultHtml;
         const nearPoint = this._getNearestPoint(
             [x, y],
-            params
+            params,
+            tooltipModel.get('trigger')
         );
 
         if (formatter && zrUtil.isString(formatter)) {
@@ -820,10 +821,17 @@ class TooltipView extends ComponentView {
 
     _getNearestPoint(
         point: number[],
-        tooltipDataParams: TooltipDataParams | TooltipDataParams[]
+        tooltipDataParams: TooltipDataParams | TooltipDataParams[],
+        trigger: TooltipOption['trigger']
     ): {
         color: ZRColor;
     } {
+        if (trigger === 'axis') {
+            return {
+                color: '#fff'
+            };
+        }
+
         if (!zrUtil.isArray(tooltipDataParams)) {
             if (!tooltipDataParams.position) {
                 return {

src/model/Series.ts

@@ -554,11 +554,12 @@ 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>` : '';
             html = !multipleSeries
                 ? seriesName + (seriesName ? '<br/>' : '') + `<div style="margin: ${seriesName ? 8 : 0}px 0 0;">`
                     + colorStr
                     + (name
-                        ? `${encodeHTML(name)}${content}`
+                        ? `<span style="font-size:12px;color:#6e7079;">${encodeHTML(name)}</span>${content}`
                         : content
                     ) + '</div>'
                 : `<div style="margin: 8px 0 0;">${colorStr}${seriesName}${content}</div>`;

src/util/format.ts

@@ -67,8 +67,8 @@ export function encodeHTML(source: string): string {
 }
 
 export function concatTooltipHtml(html: string, value: unknown, dontEncodeHtml?: boolean): string {
-    return (dontEncodeHtml ? html : encodeHTML(html))
-            + (value ? '<span style="float:right;margin-left:20px;color:#000;font-weight:900">' : '')
+    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";>' : '')
             + encodeHTML(value as string)
             + (value ? '</span>' : '');
 }
@@ -174,7 +174,7 @@ export function getTooltipMarker(inOpt: ColorString | GetTooltipMarkerOpt, extra
             + 'border-radius:4px;width:4px;height:4px;background-color:'
             // Only support string
             + encodeHTML(color) + ';' + (extraCssText || '') + '"></span>'
-        : '<span style="display:inline-block;margin-right:5px;'
+        : '<span style="display:inline-block;margin-right:4px;'
             + 'border-radius:10px;width:10px;height:10px;background-color:'
             + encodeHTML(color) + ';' + (extraCssText || '') + '"></span>';
     }