diff --git a/src/component/tooltip/TooltipView.ts b/src/component/tooltip/TooltipView.ts
index 82a222cb1d..acfe754d2f 100644
--- a/src/component/tooltip/TooltipView.ts
+++ b/src/component/tooltip/TooltipView.ts
@@ -585,7 +585,25 @@ class TooltipView extends ComponentView {
                             [series as Model<TooltipableOption>],
                             globalTooltipModel
                         ).get('valueFormatter');
-                        axisSectionMarkup.blocks.push(valueFormatter ? extend({ valueFormatter }, frag) : frag);
+                        const nameFormatter = buildTooltipModel(
+                            [series as Model<TooltipableOption>],
+                            globalTooltipModel
+                        ).get('nameFormatter');
+                        const headerFormatter = buildTooltipModel(
+                            [series as Model<TooltipableOption>],
+                            globalTooltipModel
+                        ).get('headerFormatter');
+                        const newFrag = extend({}, frag);
+                        valueFormatter && extend(newFrag, {
+                            valueFormatter: valueFormatter
+                        });
+                        nameFormatter && extend(newFrag, {
+                            nameFormatter: nameFormatter
+                        });
+                        headerFormatter && extend(newFrag, {
+                            headerFormatter: headerFormatter
+                        });
+                        axisSectionMarkup.blocks.push(newFrag);
                     }
                     if (seriesTooltipResult.text) {
                         markupTextArrLegacy.push(seriesTooltipResult.text);
@@ -682,17 +700,24 @@ class TooltipView extends ComponentView {
         );
         const orderMode = tooltipModel.get('order');
         const valueFormatter = tooltipModel.get('valueFormatter');
+        const nameFormatter = tooltipModel.get('nameFormatter');
+        const headerFormatter = tooltipModel.get('headerFormatter');
         const frag = seriesTooltipResult.frag;
-        const markupText = frag ? buildTooltipMarkup(
-                valueFormatter ? extend({ valueFormatter }, frag) : frag,
+        let markupText = seriesTooltipResult.text;
+        if (frag) {
+            const newFrag = extend({}, frag);
+            valueFormatter && extend(newFrag, {valueFormatter: valueFormatter});
+            nameFormatter && extend(newFrag, {nameFormatter: nameFormatter});
+            headerFormatter && extend(newFrag, {headerFormatter: headerFormatter});
+            markupText = buildTooltipMarkup(
+                newFrag,
                 markupStyleCreator,
                 renderMode,
                 orderMode,
                 ecModel.get('useUTC'),
                 tooltipModel.get('textStyle')
-            )
-            : seriesTooltipResult.text;
-
+            );
+        }
         const asyncTicket = 'item_' + dataModel.name + '_' + dataIndex;
 
         this._showOrMove(tooltipModel, function (this: TooltipView) {
diff --git a/src/component/tooltip/tooltipMarkup.ts b/src/component/tooltip/tooltipMarkup.ts
index c8296b7e62..b474a0e8b4 100644
--- a/src/component/tooltip/tooltipMarkup.ts
+++ b/src/component/tooltip/tooltipMarkup.ts
@@ -141,7 +141,9 @@ export interface TooltipMarkupSection extends TooltipMarkupBlock {
     // Enable to sort blocks when making final html or richText.
     sortBlocks?: boolean;
 
-    valueFormatter?: CommonTooltipOption<unknown>['valueFormatter']
+    valueFormatter?: CommonTooltipOption<unknown>['valueFormatter'];
+    nameFormatter?: CommonTooltipOption<unknown>['nameFormatter'];
+    headerFormatter?: CommonTooltipOption<unknown>['headerFormatter']
 }
 
 export interface TooltipMarkupNameValueBlock extends TooltipMarkupBlock {
@@ -163,7 +165,11 @@ export interface TooltipMarkupNameValueBlock extends TooltipMarkupBlock {
     noName?: boolean;
     noValue?: boolean;
 
-    valueFormatter?: CommonTooltipOption<unknown>['valueFormatter']
+    valueFormatter?: CommonTooltipOption<unknown>['valueFormatter'];
+    nameFormatter?: CommonTooltipOption<unknown>['nameFormatter'];
+    headerFormatter?: CommonTooltipOption<unknown>['headerFormatter']
+
+
 }
 
 /**
@@ -258,9 +264,21 @@ function buildSection(
 
     each(subBlocks, function (subBlock, idx) {
         const valueFormatter = fragment.valueFormatter;
+        const nameFormatter = fragment.nameFormatter;
+        const headerFormatter = fragment.headerFormatter;
+        const newCtx = extend({}, ctx);
+        valueFormatter && extend(newCtx, {
+            valueFormatter: valueFormatter
+        });
+        nameFormatter && extend(newCtx, {
+            nameFormatter: nameFormatter
+        });
+        headerFormatter && extend(newCtx, {
+            headerFormatter: headerFormatter
+        });
         const subMarkupText = getBuilder(subBlock)(
-            // Inherit valueFormatter
-            valueFormatter ? extend(extend({}, ctx), { valueFormatter }) : ctx,
+            // Inherit special Formatters
+            newCtx,
             subBlock,
             idx > 0 ? gaps.html : 0,
             toolTipTextStyle
@@ -278,8 +296,13 @@ function buildSection(
     if (noHeader) {
         return subMarkupText;
     }
-
-    const displayableHeader = makeValueReadable(fragment.header, 'ordinal', ctx.useUTC);
+    const headerFormatter = fragment.headerFormatter
+                          || ctx.headerFormatter
+                          || subBlocks[0].headerFormatter
+                          || ((header) => {
+        return makeValueReadable(header, 'ordinal', ctx.useUTC);
+    });
+    const displayableHeader = String(headerFormatter(fragment.header as any));
     const {nameStyle} = getTooltipTextStyle(toolTipTextStyle, ctx.renderMode);
     if (ctx.renderMode === 'richText') {
         return wrapInlineNameRichText(ctx, displayableHeader, nameStyle as RichTextStyle) + gaps.richText
@@ -315,6 +338,10 @@ function buildNameValue(
         ));
     });
 
+    const nameFormatter = fragment.nameFormatter || ctx.nameFormatter || ((name) => {
+        return makeValueReadable(name, 'ordinal', useUTC);
+    });
+
     if (noName && noValue) {
         return;
     }
@@ -328,7 +355,7 @@ function buildNameValue(
         );
     const readableName = noName
         ? ''
-        : makeValueReadable(name, 'ordinal', useUTC);
+        : nameFormatter(name);
     const valueTypeOption = fragment.valueType;
     const readableValueList = noValue ? [] : valueFormatter(fragment.value as OptionDataValue);
     const valueAlignRight = !noMarker || !noName;
@@ -362,7 +389,9 @@ interface TooltipMarkupBuildContext {
     orderMode: TooltipOrderMode;
     markupStyleCreator: TooltipMarkupStyleCreator;
 
-    valueFormatter: CommonTooltipOption<unknown>['valueFormatter']
+    valueFormatter: CommonTooltipOption<unknown>['valueFormatter'];
+    nameFormatter?: CommonTooltipOption<unknown>['nameFormatter'];
+    headerFormatter?: CommonTooltipOption<unknown>['headerFormatter']
 }
 
 /**
@@ -386,7 +415,9 @@ export function buildTooltipMarkup(
         renderMode: renderMode,
         orderMode: orderMode,
         markupStyleCreator: markupStyleCreator,
-        valueFormatter: fragment.valueFormatter
+        valueFormatter: fragment.valueFormatter,
+        nameFormatter: fragment.nameFormatter,
+        headerFormatter: fragment.headerFormatter
     };
     return builder(ctx, fragment, 0, toolTipTextStyle);
 }
diff --git a/src/util/types.ts b/src/util/types.ts
index 91b5679397..ba9ebf5125 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -1264,6 +1264,18 @@ export interface CommonTooltipOption<FormatterParams> {
      * Will be ignored if tooltip.formatter is specified.
      */
     valueFormatter?: (value: OptionDataValue | OptionDataValue[]) => string
+    /**
+     * Formatter of value.
+     *
+     * Will be ignored if tooltip.formatter is specified.
+     */
+     nameFormatter?: (value: OptionDataValue | OptionDataValue[]) => string
+     /**
+     * Formatter of value.
+     *
+     * Will be ignored if tooltip.formatter is specified.
+     */
+    headerFormatter?: (value: OptionDataValue | OptionDataValue[]) => string
     /**
      * Absolution pixel [x, y] array. Or relative percent string [x, y] array.
      * If trigger is 'item'. position can be set to 'inside' / 'top' / 'left' / 'right' / 'bottom',