diff --git a/src/component/DefaultTooltipContent.tsx b/src/component/DefaultTooltipContent.tsx
index 4b7c381269..0ec1289527 100644
--- a/src/component/DefaultTooltipContent.tsx
+++ b/src/component/DefaultTooltipContent.tsx
@@ -2,7 +2,7 @@
  * @fileOverview Default Tooltip Content
  */
 import _ from 'lodash';
-import React, { PureComponent, CSSProperties, ReactNode } from 'react';
+import React, { CSSProperties, ReactNode } from 'react';
 import classNames from 'classnames';
 import { isNumOrStr } from '../util/DataUtils';
 
@@ -19,7 +19,7 @@ export type Formatter<TValue extends ValueType, TName extends NameType> = (
   item: Payload<TValue, TName>,
   index: number,
   payload: Array<Payload<TValue, TName>>,
-) => [TValue, TName] | TValue;
+) => [React.ReactNode, TName] | React.ReactNode;
 
 export interface Payload<TValue extends ValueType, TName extends NameType> {
   type?: TooltipType;
@@ -50,21 +50,24 @@ export interface Props<TValue extends ValueType, TName extends NameType> {
   itemSorter?: (item: Payload<TValue, TName>) => number | string;
 }
 
-export class DefaultTooltipContent<TValue extends ValueType, TName extends NameType> extends PureComponent<
-  Props<TValue, TName>
-> {
-  static displayName = 'DefaultTooltipContent';
-
-  static defaultProps = {
-    separator: ' : ',
-    contentStyle: {},
-    itemStyle: {},
-    labelStyle: {},
-  };
-
-  renderContent() {
-    const { payload, separator, formatter, itemStyle, itemSorter } = this.props;
+export const DefaultTooltipContent = <TValue extends ValueType, TName extends NameType>(
+  props: Props<TValue, TName>,
+) => {
+  const {
+    separator = ' : ',
+    contentStyle = {},
+    itemStyle = {},
+    labelStyle = {},
+    payload,
+    formatter,
+    itemSorter,
+    wrapperClassName,
+    labelClassName,
+    label,
+    labelFormatter,
+  } = props;
 
+  const renderContent = () => {
     if (payload && payload.length) {
       const listStyle = { padding: 0, margin: 0 };
 
@@ -81,21 +84,24 @@ export class DefaultTooltipContent<TValue extends ValueType, TName extends NameT
           ...itemStyle,
         };
         const finalFormatter = entry.formatter || formatter || defaultFormatter;
-        let { value, name } = entry;
-        if (finalFormatter && value != null && name != null) {
+        const { value, name } = entry;
+        let finalValue: React.ReactNode = value;
+        let finalName: React.ReactNode = name;
+        if (finalFormatter && finalValue != null && finalName != null) {
           const formatted = finalFormatter(value, name, entry, i, payload);
           if (Array.isArray(formatted)) {
-            [value, name] = formatted as [TValue, TName];
+            [finalValue, finalName] = formatted;
           } else {
-            value = formatted;
+            finalValue = formatted;
           }
         }
+
         return (
           // eslint-disable-next-line react/no-array-index-key
           <li className="recharts-tooltip-item" key={`tooltip-item-${i}`} style={finalItemStyle}>
-            {isNumOrStr(name) ? <span className="recharts-tooltip-item-name">{name}</span> : null}
-            {isNumOrStr(name) ? <span className="recharts-tooltip-item-separator">{separator}</span> : null}
-            <span className="recharts-tooltip-item-value">{value}</span>
+            {isNumOrStr(finalName) ? <span className="recharts-tooltip-item-name">{finalName}</span> : null}
+            {isNumOrStr(finalName) ? <span className="recharts-tooltip-item-separator">{separator}</span> : null}
+            <span className="recharts-tooltip-item-value">{finalValue}</span>
             <span className="recharts-tooltip-item-unit">{entry.unit || ''}</span>
           </li>
         );
@@ -109,38 +115,35 @@ export class DefaultTooltipContent<TValue extends ValueType, TName extends NameT
     }
 
     return null;
-  }
-
-  render() {
-    const { wrapperClassName, contentStyle, labelClassName, labelStyle, label, labelFormatter, payload } = this.props;
-    const finalStyle: CSSProperties = {
-      margin: 0,
-      padding: 10,
-      backgroundColor: '#fff',
-      border: '1px solid #ccc',
-      whiteSpace: 'nowrap',
-      ...contentStyle,
-    };
-    const finalLabelStyle = {
-      margin: 0,
-      ...labelStyle,
-    };
-    const hasLabel = !_.isNil(label);
-    let finalLabel = hasLabel ? label : '';
-    const wrapperCN = classNames('recharts-default-tooltip', wrapperClassName);
-    const labelCN = classNames('recharts-tooltip-label', labelClassName);
+  };
 
-    if (hasLabel && labelFormatter && payload !== undefined && payload !== null) {
-      finalLabel = labelFormatter(label, payload);
-    }
+  const finalStyle: React.CSSProperties = {
+    margin: 0,
+    padding: 10,
+    backgroundColor: '#fff',
+    border: '1px solid #ccc',
+    whiteSpace: 'nowrap',
+    ...contentStyle,
+  };
+  const finalLabelStyle = {
+    margin: 0,
+    ...labelStyle,
+  };
+  const hasLabel = !_.isNil(label);
+  let finalLabel = hasLabel ? label : '';
+  const wrapperCN = classNames('recharts-default-tooltip', wrapperClassName);
+  const labelCN = classNames('recharts-tooltip-label', labelClassName);
 
-    return (
-      <div className={wrapperCN} style={finalStyle}>
-        <p className={labelCN} style={finalLabelStyle}>
-          {React.isValidElement(finalLabel) ? finalLabel : `${finalLabel}`}
-        </p>
-        {this.renderContent()}
-      </div>
-    );
+  if (hasLabel && labelFormatter && payload !== undefined && payload !== null) {
+    finalLabel = labelFormatter(label, payload);
   }
-}
+
+  return (
+    <div className={wrapperCN} style={finalStyle}>
+      <p className={labelCN} style={finalLabelStyle}>
+        {React.isValidElement(finalLabel) ? finalLabel : `${finalLabel}`}
+      </p>
+      {renderContent()}
+    </div>
+  );
+};
diff --git a/storybook/stories/API/tooltip/Tooltip.stories.tsx b/storybook/stories/API/tooltip/Tooltip.stories.tsx
index ec0bd557d5..8088ace2d3 100644
--- a/storybook/stories/API/tooltip/Tooltip.stories.tsx
+++ b/storybook/stories/API/tooltip/Tooltip.stories.tsx
@@ -88,6 +88,23 @@ export const MultipleValuedTooltip = {
   },
 };
 
+export const TriggerTooltipByClick = {
+  render: (tooltipArgs: Record<string, any>) => {
+    return (
+      <ResponsiveContainer width="100%" height={400}>
+        <LineChart data={subjectData}>
+          <Tooltip {...tooltipArgs} trigger="click" />
+          <XAxis dataKey="subject" />
+          <YAxis />
+          {Marks.map(({ marks, fill }) => (
+            <Line key={marks} dataKey={marks} fill={fill} />
+          ))}
+        </LineChart>
+      </ResponsiveContainer>
+    );
+  },
+};
+
 const CustomMultipleValueTooltip = ({ active, payload }: CustomTooltipProps) => {
   if (active && payload && payload.length > 0) {
     return (
diff --git a/storybook/stories/Examples/Tooltip.stories.tsx b/storybook/stories/Examples/Tooltip.stories.tsx
index 89c7ac4d27..c5794d919c 100644
--- a/storybook/stories/Examples/Tooltip.stories.tsx
+++ b/storybook/stories/Examples/Tooltip.stories.tsx
@@ -15,9 +15,11 @@ export const LockedByClick = {
     // Their update is interrupted by the click event, so we need to store them in a state.
     const [tooltipData, setTooltipData] = React.useState<{ payload?: unknown[]; label?: string; x?: number }>({});
 
-    // A custom Tooltip that updates the payload of the tooltip if the chart is locked, and either way always renders using the normal Tooltip.
+    // A custom Tooltip that updates the payload of the tooltip if the
+    // chart is locked, and either way always renders using the normal Tooltip.
     const CustomTooltip = (props: any) => {
-      // If the chart is locked, and the payload is not empty, and the x position of the tooltip has changed, update the tooltipData.
+      // If the chart is locked, and the payload is not empty, and the
+      // x position of the tooltip has changed, update the tooltipData.
       if (!isLocked && props.payload && props.payload.length > 0 && props.coordinate.x !== tooltipData.x) {
         setTooltipData({ payload: props.payload, x: props.coordinate.x, label: props.label });
       }