diff --git a/src/components/QueryResultTable/Cell/Cell.tsx b/src/components/QueryResultTable/Cell/Cell.tsx
index 2df43422b2..1c87e008ed 100644
--- a/src/components/QueryResultTable/Cell/Cell.tsx
+++ b/src/components/QueryResultTable/Cell/Cell.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
-import {showTooltip} from '../../../store/reducers/tooltip';
-import {useTypedDispatch} from '../../../utils/hooks';
+import {Popup} from '@gravity-ui/uikit';
+
 import {b} from '../QueryResultTable';
 
 interface CellProps {
@@ -12,14 +12,31 @@ interface CellProps {
 export const Cell = React.memo(function Cell(props: CellProps) {
     const {className, value} = props;
 
-    const dispatch = useTypedDispatch();
+    const [open, setOpen] = React.useState(false);
+    const anchorRef = React.useRef<HTMLSpanElement | null>(null);
+
+    const handleToggle = React.useCallback(() => {
+        setOpen((prevOpen) => !prevOpen);
+    }, []);
+
+    const handleClose = React.useCallback(() => {
+        setOpen(false);
+    }, []);
 
     return (
-        <span
-            className={b('cell', className)}
-            onClick={(e) => dispatch(showTooltip(e.target, value, 'cell'))}
-        >
-            {value}
-        </span>
+        <React.Fragment>
+            <Popup
+                open={open}
+                hasArrow
+                placement={['top', 'bottom']}
+                anchorRef={anchorRef}
+                onOutsideClick={handleClose}
+            >
+                <div className={b('cell-popup')}>{value}</div>
+            </Popup>
+            <span ref={anchorRef} className={b('cell', className)} onClick={handleToggle}>
+                {value}
+            </span>
+        </React.Fragment>
     );
 });
diff --git a/src/components/QueryResultTable/QueryResultTable.scss b/src/components/QueryResultTable/QueryResultTable.scss
index ee984ff469..99bd990e22 100644
--- a/src/components/QueryResultTable/QueryResultTable.scss
+++ b/src/components/QueryResultTable/QueryResultTable.scss
@@ -6,6 +6,13 @@
         @include mixins.cell-container;
     }
 
+    &__cell-popup {
+        max-width: 300px;
+        padding: 10px;
+
+        word-break: break-word;
+    }
+
     &__message {
         padding: 15px 10px;
     }
diff --git a/src/components/QueryResultTable/QueryResultTable.tsx b/src/components/QueryResultTable/QueryResultTable.tsx
index a7d7c1f7f7..10f4160c39 100644
--- a/src/components/QueryResultTable/QueryResultTable.tsx
+++ b/src/components/QueryResultTable/QueryResultTable.tsx
@@ -28,7 +28,7 @@ export const b = cn('ydb-query-result-table');
 
 const WIDTH_PREDICTION_ROWS_COUNT = 100;
 
-const prepareTypedColumns = (columns: ColumnType[], data?: KeyValueRow[]) => {
+const prepareTypedColumns = (columns: ColumnType[], data: KeyValueRow[] | undefined) => {
     if (!columns.length) {
         return [];
     }
@@ -49,7 +49,7 @@ const prepareTypedColumns = (columns: ColumnType[], data?: KeyValueRow[]) => {
     });
 };
 
-const prepareGenericColumns = (data?: KeyValueRow[]) => {
+const prepareGenericColumns = (data: KeyValueRow[] | undefined) => {
     if (!data?.length) {
         return [];
     }
@@ -85,7 +85,7 @@ export const QueryResultTable = (props: QueryResultTableProps) => {
 
     const preparedColumns = React.useMemo(() => {
         return columns ? prepareTypedColumns(columns, data) : prepareGenericColumns(data);
-    }, [data, columns]);
+    }, [columns, data]);
 
     const settings = React.useMemo(() => {
         return {
diff --git a/src/containers/App/App.tsx b/src/containers/App/App.tsx
index fcbbc1b2c4..367c5518aa 100644
--- a/src/containers/App/App.tsx
+++ b/src/containers/App/App.tsx
@@ -7,7 +7,6 @@ import {Helmet} from 'react-helmet-async';
 import {componentsRegistry} from '../../components/ComponentsProvider/componentsRegistry';
 import {FullscreenProvider} from '../../components/Fullscreen/FullscreenContext';
 import {useTypedSelector} from '../../utils/hooks';
-import ReduxTooltip from '../ReduxTooltip/ReduxTooltip';
 import type {YDBEmbeddedUISettings} from '../UserSettings/settings';
 
 import {useAppTitle} from './AppTitleContext';
@@ -34,7 +33,6 @@ function App({store, history, children, userSettings, appTitle = defaultAppTitle
         <Providers store={store} history={history} appTitle={appTitle}>
             <AppContent userSettings={userSettings}>{children}</AppContent>
             {ChatPanel && <ChatPanel />}
-            <ReduxTooltip />
         </Providers>
     );
 }
diff --git a/src/containers/Heatmap/Heatmap.scss b/src/containers/Heatmap/Heatmap.scss
index ea1d7dd330..02c0f6c932 100644
--- a/src/containers/Heatmap/Heatmap.scss
+++ b/src/containers/Heatmap/Heatmap.scss
@@ -51,6 +51,8 @@
     }
 
     &__items {
+        position: relative;
+
         overflow: auto;
     }
     &__canvas-container {
@@ -59,6 +61,19 @@
         cursor: pointer;
     }
 
+    &__tooltip-anchor {
+        position: absolute;
+
+        width: 1px;
+        height: 1px;
+
+        pointer-events: none;
+    }
+
+    &__tooltip {
+        padding: 10px;
+    }
+
     &__filters {
         display: flex;
         align-items: center;
diff --git a/src/containers/Heatmap/Heatmap.tsx b/src/containers/Heatmap/Heatmap.tsx
index 4e988d2215..6b096305a6 100644
--- a/src/containers/Heatmap/Heatmap.tsx
+++ b/src/containers/Heatmap/Heatmap.tsx
@@ -1,12 +1,12 @@
 import React from 'react';
 
-import {Checkbox, Select} from '@gravity-ui/uikit';
+import {Checkbox, Popup, Select} from '@gravity-ui/uikit';
 
 import {ResponseError} from '../../components/Errors/ResponseError';
 import {Loader} from '../../components/Loader';
+import {TabletTooltipContent} from '../../components/TooltipsContent';
 import {heatmapApi, setHeatmapOptions} from '../../store/reducers/heatmap';
-import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
-import type {IHeatmapMetricValue} from '../../types/store/heatmap';
+import type {IHeatmapMetricValue, IHeatmapTabletData} from '../../types/store/heatmap';
 import {cn} from '../../utils/cn';
 import {EMPTY_DATA_PLACEHOLDER} from '../../utils/constants';
 import {formatNumber} from '../../utils/dataFormatters/dataFormatters';
@@ -32,6 +32,14 @@ export const Heatmap = ({path, database, databaseFullPath}: HeatmapProps) => {
 
     const itemsContainer = React.createRef<HTMLDivElement>();
 
+    const [tabletTooltip, setTabletTooltip] = React.useState<{
+        tablet: IHeatmapTabletData;
+        position: {left: number; top: number};
+    } | null>(null);
+    const [tabletTooltipAnchorElement, setTabletTooltipAnchorElement] =
+        React.useState<HTMLDivElement | null>(null);
+    const isTabletTooltipHoveredRef = React.useRef(false);
+
     const [autoRefreshInterval] = useAutoRefreshInterval();
 
     const {currentData, isFetching, error} = heatmapApi.useGetHeatmapTabletsInfoQuery(
@@ -44,13 +52,35 @@ export const Heatmap = ({path, database, databaseFullPath}: HeatmapProps) => {
     const {tablets = [], metrics} = currentData || {};
     const {sort, heatmap, currentMetric} = useTypedSelector((state) => state.heatmap);
 
-    const onShowTooltip = (...args: Parameters<typeof showTooltip>) => {
-        dispatch(showTooltip(...args));
-    };
+    const handleShowTabletTooltip = React.useCallback(
+        (tablet: IHeatmapTabletData, position: {left: number; top: number}) => {
+            setTabletTooltip({tablet, position});
+        },
+        [],
+    );
 
-    const onHideTooltip = () => {
-        dispatch(hideTooltip());
-    };
+    const handleHideTabletTooltip = React.useCallback(() => {
+        setTabletTooltip(null);
+    }, []);
+
+    const handleRequestHideTabletTooltip = React.useCallback(() => {
+        setTabletTooltip((prev) => {
+            if (!prev || isTabletTooltipHoveredRef.current) {
+                return prev;
+            }
+
+            return null;
+        });
+    }, []);
+
+    const handleTooltipMouseEnter = React.useCallback(() => {
+        isTabletTooltipHoveredRef.current = true;
+    }, []);
+
+    const handleTooltipMouseLeave = React.useCallback(() => {
+        isTabletTooltipHoveredRef.current = false;
+        handleHideTabletTooltip();
+    }, [handleHideTabletTooltip]);
 
     const handleMetricChange = (value: string[]) => {
         dispatch(
@@ -76,14 +106,7 @@ export const Heatmap = ({path, database, databaseFullPath}: HeatmapProps) => {
     };
 
     const renderHistogram = () => {
-        return (
-            <Histogram
-                tablets={tablets}
-                currentMetric={currentMetric}
-                showTooltip={onShowTooltip}
-                hideTooltip={onHideTooltip}
-            />
-        );
+        return <Histogram tablets={tablets} currentMetric={currentMetric} />;
     };
 
     const renderHeatmapCanvas = () => {
@@ -108,11 +131,22 @@ export const Heatmap = ({path, database, databaseFullPath}: HeatmapProps) => {
 
         return (
             <div ref={itemsContainer} className={b('items')}>
+                {tabletTooltip ? (
+                    <div
+                        key={`${tabletTooltip.position.left}-${tabletTooltip.position.top}`}
+                        ref={setTabletTooltipAnchorElement}
+                        className={b('tooltip-anchor')}
+                        style={{
+                            left: tabletTooltip.position.left,
+                            top: tabletTooltip.position.top,
+                        }}
+                    />
+                ) : null}
                 <HeatmapCanvas
                     tablets={sortedTablets}
                     parentRef={itemsContainer}
-                    showTooltip={onShowTooltip}
-                    hideTooltip={onHideTooltip}
+                    onShowTabletTooltip={handleShowTabletTooltip}
+                    onHideTabletTooltip={handleRequestHideTabletTooltip}
                 />
             </div>
         );
@@ -128,6 +162,23 @@ export const Heatmap = ({path, database, databaseFullPath}: HeatmapProps) => {
 
         return (
             <div className={b()}>
+                {tabletTooltip ? (
+                    <Popup
+                        open
+                        hasArrow
+                        placement={['top', 'bottom', 'left', 'right']}
+                        anchorElement={tabletTooltipAnchorElement}
+                        onOutsideClick={handleHideTabletTooltip}
+                    >
+                        <div
+                            className={b('tooltip')}
+                            onMouseEnter={handleTooltipMouseEnter}
+                            onMouseLeave={handleTooltipMouseLeave}
+                        >
+                            <TabletTooltipContent data={tabletTooltip.tablet} />
+                        </div>
+                    </Popup>
+                ) : null}
                 <div className={b('filters')}>
                     <Select
                         className={b('heatmap-select')}
diff --git a/src/containers/Heatmap/HeatmapCanvas/HeatmapCanvas.js b/src/containers/Heatmap/HeatmapCanvas/HeatmapCanvas.tsx
similarity index 56%
rename from src/containers/Heatmap/HeatmapCanvas/HeatmapCanvas.js
rename to src/containers/Heatmap/HeatmapCanvas/HeatmapCanvas.tsx
index 1409e4878f..67d60e84a3 100644
--- a/src/containers/Heatmap/HeatmapCanvas/HeatmapCanvas.js
+++ b/src/containers/Heatmap/HeatmapCanvas/HeatmapCanvas.tsx
@@ -1,28 +1,65 @@
 import React from 'react';
 
 import throttle from 'lodash/throttle';
-import PropTypes from 'prop-types';
 
 import {useTabletPagePath} from '../../../routes';
 import {basename as appBasename} from '../../../store/index';
+import type {IHeatmapTabletData} from '../../../types/store/heatmap';
 import {cn} from '../../../utils/cn';
 
 const b = cn('heatmap');
-const defaultDimensions = {width: 0, height: 0};
 
 const TABLET_SIZE = 10;
 const TABLET_PADDING = 2;
 
-export const HeatmapCanvas = (props) => {
-    const [dimensions, setDimensions] = React.useState(defaultDimensions);
-    const {tablets} = props;
-    const canvasRef = React.useRef(null);
-    const containerRef = React.useRef(null);
+interface HeatmapCanvasDimensions {
+    width: number;
+    height: number;
+    columnsCount: number;
+    rowsCount: number;
+}
+
+const defaultDimensions: HeatmapCanvasDimensions = {
+    width: 0,
+    height: 0,
+    columnsCount: 0,
+    rowsCount: 0,
+};
+
+type HeatmapCanvasTablet = IHeatmapTabletData & {
+    color?: string;
+};
+
+interface HeatmapCanvasProps {
+    tablets: HeatmapCanvasTablet[];
+    parentRef: React.RefObject<HTMLDivElement>;
+    onShowTabletTooltip: (
+        tablet: IHeatmapTabletData,
+        position: {left: number; top: number},
+    ) => void;
+    onHideTabletTooltip: () => void;
+}
+
+export const HeatmapCanvas = (props: HeatmapCanvasProps) => {
+    const [dimensions, setDimensions] = React.useState<HeatmapCanvasDimensions>(defaultDimensions);
+    const {tablets, onShowTabletTooltip, onHideTabletTooltip} = props;
+    const canvasRef = React.useRef<HTMLCanvasElement | null>(null);
+    const containerRef = React.useRef<HTMLDivElement | null>(null);
 
     const getTabletPagePath = useTabletPagePath();
 
-    function drawTablet(ctx) {
-        return (tablet, index) => {
+    React.useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas) {
+            return;
+        }
+
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            return;
+        }
+
+        const drawTablet = (tablet: HeatmapCanvasTablet, index: number) => {
             const {columnsCount} = dimensions;
             const rectX = (index % columnsCount) * (TABLET_SIZE + TABLET_PADDING);
             const rectY = Math.floor(index / columnsCount) * (TABLET_SIZE + TABLET_PADDING);
@@ -30,15 +67,12 @@ export const HeatmapCanvas = (props) => {
             ctx.fillStyle = tablet.color || 'grey';
             ctx.fillRect(rectX, rectY, TABLET_SIZE, TABLET_SIZE);
         };
-    }
-
-    React.useEffect(() => {
-        const canvas = canvasRef.current;
-        const ctx = canvas.getContext('2d');
 
         ctx.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
-        tablets.map(drawTablet(ctx));
-    });
+        tablets.forEach(drawTablet);
+    }, [tablets, dimensions]);
+
+    const tabletsLength = tablets.length;
 
     React.useLayoutEffect(() => {
         const container = containerRef.current;
@@ -46,7 +80,7 @@ export const HeatmapCanvas = (props) => {
         if (container) {
             const width = container.offsetWidth - 15;
             const columnsCount = Math.floor(width / (TABLET_SIZE + TABLET_PADDING));
-            const rowsCount = Math.ceil(tablets.length / columnsCount);
+            const rowsCount = Math.ceil(tabletsLength / columnsCount);
             const height = rowsCount * (TABLET_SIZE + TABLET_PADDING);
 
             setDimensions({
@@ -56,29 +90,33 @@ export const HeatmapCanvas = (props) => {
                 rowsCount,
             });
         }
-    }, []);
+    }, [tabletsLength]);
 
     const getOffsetTop = () => {
-        let element = canvasRef.current;
+        let element: HTMLElement | null = canvasRef.current;
         let offsetTop = 0;
+
         while (element) {
             offsetTop += element.offsetTop;
-            element = element.offsetParent;
+            element = element.offsetParent as HTMLElement | null;
         }
+
         return offsetTop;
     };
 
     const getOffsetLeft = () => {
-        let element = canvasRef.current;
+        let element: HTMLElement | null = canvasRef.current;
         let offsetLeft = 0;
+
         while (element) {
             offsetLeft += element.offsetLeft;
-            element = element.offsetParent;
+            element = element.offsetParent as HTMLElement | null;
         }
+
         return offsetLeft;
     };
 
-    const getTabletIndex = (x, y) => {
+    const getTabletIndex = (x: number, y: number) => {
         const {columnsCount} = dimensions;
         const colStep = TABLET_SIZE + TABLET_PADDING;
         const rowStep = TABLET_SIZE + TABLET_PADDING;
@@ -89,10 +127,15 @@ export const HeatmapCanvas = (props) => {
 
         return index;
     };
-    const generateTabletExternalLink = (tablet) => {
-        const {TabletId: id} = tablet;
+
+    const generateTabletExternalLink = (tablet: HeatmapCanvasTablet) => {
+        const {TabletId} = tablet;
+        if (!TabletId) {
+            return '#';
+        }
+
         const hostname = window.location.hostname;
-        const path = getTabletPagePath(id);
+        const path = getTabletPagePath(TabletId);
         const protocol = 'https://';
         const href = [hostname, appBasename, path]
             .map((item) => (item.startsWith('/') ? item.slice(1) : item))
@@ -101,8 +144,13 @@ export const HeatmapCanvas = (props) => {
 
         return `${protocol}${href}`;
     };
-    const _onCanvasClick = (e) => {
+
+    const _onCanvasClick = (e: React.MouseEvent<HTMLCanvasElement>) => {
         const parent = props.parentRef.current;
+        if (!parent) {
+            return;
+        }
+
         const x = e.clientX - getOffsetLeft() + parent.scrollLeft;
         const y = e.clientY - getOffsetTop() + parent.scrollTop;
 
@@ -113,35 +161,42 @@ export const HeatmapCanvas = (props) => {
             window.open(generateTabletExternalLink(tablet), '_blank');
         }
     };
+
     const _onCanvasMouseLeave = () => {
-        // Timeout is needed to surely hide tooltip. In _onCanvasMouseMove method is is used "throttle"
-        // and it can cause tooltip render function after canvas field is actually leaved.
-        //So we use in timeout we use a delay greater then delay in throttle.
         setTimeout(() => {
-            props.hideTooltip();
+            onHideTabletTooltip();
         }, 40);
     };
-    const _onCanvasMouseMove = throttle((x, y) => {
-        //this is needed to force ReduxPopup rerender
-        const event = new CustomEvent('scroll');
-        window.dispatchEvent(event);
+
+    const _onCanvasMouseMove = throttle((x: number, y: number) => {
         const parent = props.parentRef.current;
+        if (!parent) {
+            return;
+        }
+
         const xPos = x - getOffsetLeft() + parent.scrollLeft;
         const yPos = y - getOffsetTop() + parent.scrollTop;
 
         const tabletIndex = getTabletIndex(xPos, yPos);
         const tablet = tablets[tabletIndex];
+
         if (tablet) {
-            const additionalData = {
-                name: tablet.currentMetric,
-                value: tablet.formattedValue,
-            };
-            props.showTooltip(undefined, tablet, 'tablet', additionalData, {
-                left: x - 20,
-                top: y - 20,
-            });
+            const {columnsCount} = dimensions;
+            if (!columnsCount) {
+                return;
+            }
+            const colIndex = tabletIndex % columnsCount;
+            const rowIndex = Math.floor(tabletIndex / columnsCount);
+
+            const rectX = colIndex * (TABLET_SIZE + TABLET_PADDING);
+            const rectY = rowIndex * (TABLET_SIZE + TABLET_PADDING);
+
+            const left = rectX + TABLET_SIZE / 2;
+            const top = rectY + TABLET_SIZE / 2;
+
+            onShowTabletTooltip(tablet, {left, top});
         } else {
-            props.hideTooltip();
+            onHideTabletTooltip();
         }
     }, 20);
 
@@ -161,10 +216,3 @@ export const HeatmapCanvas = (props) => {
         </div>
     );
 };
-
-HeatmapCanvas.propTypes = {
-    tablets: PropTypes.array,
-    parentRef: PropTypes.object,
-    showTooltip: PropTypes.func,
-    hideTooltip: PropTypes.func,
-};
diff --git a/src/containers/Heatmap/Histogram/Histogram.js b/src/containers/Heatmap/Histogram/Histogram.js
deleted file mode 100644
index 73a4a21d2d..0000000000
--- a/src/containers/Heatmap/Histogram/Histogram.js
+++ /dev/null
@@ -1,109 +0,0 @@
-import React from 'react';
-
-import PropTypes from 'prop-types';
-
-import {cn} from '../../../utils/cn';
-import {formatNumber} from '../../../utils/dataFormatters/dataFormatters';
-import {getColorRange, getCurrentMetricLimits} from '../util';
-
-import './Histogram.scss';
-
-const b = cn('histogram');
-
-const HistogramBar = (props) => {
-    const barRef = React.useRef();
-    const {data = {}, maxCount} = props;
-    const {count, leftBound, rightBound, color} = data;
-    const height = (count / maxCount) * 100;
-
-    const _onHistogramItemEnter = () => {
-        const ref = barRef.current;
-
-        props.showTooltip(
-            ref,
-            {
-                count,
-                leftBound,
-                rightBound,
-            },
-            'histogram',
-        );
-    };
-
-    return (
-        <div
-            ref={barRef}
-            className={b('item')}
-            style={{backgroundColor: color, height: `${height}%`}}
-            onMouseEnter={_onHistogramItemEnter}
-            onMouseLeave={props.hideTooltip}
-        />
-    );
-};
-HistogramBar.propTypes = {
-    data: PropTypes.object,
-    maxCount: PropTypes.number,
-    showTooltip: PropTypes.func,
-    hideTooltip: PropTypes.func,
-};
-
-export const Histogram = (props) => {
-    const {tablets, currentMetric} = props;
-    const {min, max} = getCurrentMetricLimits(currentMetric, tablets);
-
-    const histogramColorRange = getColorRange(50);
-    const step = (max - min) / 50;
-    const histogramRange = histogramColorRange.map((item, index) => {
-        return {
-            color: item,
-            count: 0,
-            leftBound: formatNumber(min + index * step),
-            rightBound: formatNumber(min + (index + 1) * step),
-        };
-    });
-    let maxCount = 0;
-    tablets.forEach((tablet) => {
-        const value = currentMetric && Number(tablet.metrics?.[currentMetric]);
-        const bucketIndex = Math.floor(value / step);
-        const nextCountValue = histogramRange[bucketIndex]?.count + 1;
-
-        if (nextCountValue > maxCount) {
-            maxCount = nextCountValue;
-        }
-
-        histogramRange[bucketIndex] = {
-            ...histogramRange[bucketIndex],
-            count: nextCountValue,
-        };
-    });
-
-    const renderHistogramItem = (item, index) => {
-        return (
-            <HistogramBar
-                key={index}
-                data={item}
-                maxCount={maxCount}
-                showTooltip={props.showTooltip}
-                hideTooltip={props.hideTooltip}
-            />
-        );
-    };
-
-    return (
-        <div className={b()}>
-            <div className={b('chart')}>
-                {Boolean(max) && histogramRange.map(renderHistogramItem)}
-                <div className={b('x-min')}>{formatNumber(min)}</div>
-                <div className={b('x-max')}>{formatNumber(max)}</div>
-                <div className={b('y-min')}>0</div>
-                <div className={b('y-max')}>{formatNumber(maxCount)}</div>
-            </div>
-        </div>
-    );
-};
-Histogram.propTypes = {
-    tablets: PropTypes.array,
-    currentMetric: PropTypes.string,
-    showTooltip: PropTypes.func,
-    hideTooltip: PropTypes.func,
-};
diff --git a/src/containers/Heatmap/Histogram/Histogram.scss b/src/containers/Heatmap/Histogram/Histogram.scss
index b7b1afe65d..47dc95ea23 100644
--- a/src/containers/Heatmap/Histogram/Histogram.scss
+++ b/src/containers/Heatmap/Histogram/Histogram.scss
@@ -59,3 +59,13 @@
         cursor: pointer;
     }
 }
+
+.histogram-tooltip {
+    padding: 10px;
+
+    &__label {
+        padding-right: 15px;
+
+        color: var(--g-color-text-secondary);
+    }
+}
diff --git a/src/containers/Heatmap/Histogram/Histogram.tsx b/src/containers/Heatmap/Histogram/Histogram.tsx
new file mode 100644
index 0000000000..68a5139910
--- /dev/null
+++ b/src/containers/Heatmap/Histogram/Histogram.tsx
@@ -0,0 +1,214 @@
+import React from 'react';
+
+import {Popup} from '@gravity-ui/uikit';
+
+import type {IHeatmapMetricValue, IHeatmapTabletData} from '../../../types/store/heatmap';
+import {cn} from '../../../utils/cn';
+import {formatNumber} from '../../../utils/dataFormatters/dataFormatters';
+import {getColorRange, getCurrentMetricLimits} from '../util';
+
+import i18n from './i18n';
+
+import './Histogram.scss';
+
+const b = cn('histogram');
+const tooltipB = cn('histogram-tooltip');
+
+interface HistogramTooltipData {
+    count?: number;
+    leftBound?: string;
+    rightBound?: string;
+}
+
+interface HistogramTooltipContentProps {
+    data?: HistogramTooltipData | null;
+}
+
+const HistogramTooltipContent = ({data}: HistogramTooltipContentProps) => {
+    if (!data) {
+        return null;
+    }
+
+    const {count, leftBound, rightBound} = data;
+
+    return (
+        <div className={tooltipB()}>
+            <table>
+                <tbody>
+                    <tr>
+                        <td className={tooltipB('label')}>{i18n('label_count')}</td>
+                        <td className={tooltipB('value')}>{count || '?'}</td>
+                    </tr>
+                    <tr>
+                        <td className={tooltipB('label')}>{i18n('label_from')}</td>
+                        <td className={tooltipB('value')}>{leftBound || '?'}</td>
+                    </tr>
+                    <tr>
+                        <td className={tooltipB('label')}>{i18n('label_to')}</td>
+                        <td className={tooltipB('value')}>{rightBound || '?'}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    );
+};
+
+interface HistogramBarData extends HistogramTooltipData {
+    color?: string;
+}
+
+interface HistogramBarProps {
+    data?: HistogramBarData;
+    maxCount: number;
+    onShowTooltip: (anchor: HTMLElement, data: HistogramTooltipData) => void;
+    onHideTooltip: () => void;
+}
+
+const HistogramBar = ({data = {}, maxCount, onShowTooltip, onHideTooltip}: HistogramBarProps) => {
+    const barRef = React.useRef<HTMLDivElement | null>(null);
+    const {count, leftBound, rightBound, color} = data;
+
+    const safeCount = Number(count) || 0;
+    const height = maxCount > 0 ? (safeCount / maxCount) * 100 : 0;
+
+    const handleMouseEnter = () => {
+        const ref = barRef.current;
+        if (!ref) {
+            return;
+        }
+
+        onShowTooltip(ref, {
+            count,
+            leftBound,
+            rightBound,
+        });
+    };
+
+    const handleMouseLeave = () => {
+        onHideTooltip();
+    };
+
+    return (
+        <div
+            ref={barRef}
+            className={b('item')}
+            style={{backgroundColor: color, height: `${height}%`}}
+            onMouseEnter={handleMouseEnter}
+            onMouseLeave={handleMouseLeave}
+        />
+    );
+};
+
+interface HistogramTooltipState {
+    anchor: HTMLElement | null;
+    data: HistogramTooltipData | null;
+}
+
+export interface HistogramProps {
+    tablets: IHeatmapTabletData[];
+    currentMetric?: IHeatmapMetricValue;
+}
+
+export const Histogram = ({tablets, currentMetric}: HistogramProps) => {
+    const {min, max} = getCurrentMetricLimits(currentMetric, tablets);
+
+    const {histogramRange, maxCount} = React.useMemo(() => {
+        const histogramColorRange = getColorRange(50);
+        const step = (max - min) / 50;
+
+        if (step === 0 || !isFinite(step)) {
+            // Handle edge case where all values are the same
+            return {histogramRange: [], maxCount: 0};
+        }
+
+        const range: HistogramBarData[] = histogramColorRange.map((item, index) => {
+            return {
+                color: item,
+                count: 0,
+                leftBound: formatNumber(min + index * step),
+                rightBound: formatNumber(min + (index + 1) * step),
+            };
+        });
+
+        let currentMaxCount = 0;
+
+        tablets.forEach((tablet) => {
+            const rawValue = currentMetric && tablet.metrics?.[currentMetric];
+            const value = Number(rawValue);
+
+            // Skip invalid values (NaN, undefined, null, or out of range)
+            if (!isFinite(value) || value < min || value > max) {
+                return;
+            }
+
+            // Calculate bucket index with proper bounds checking
+            const bucketIndex = Math.min(Math.floor((value - min) / step), range.length - 1);
+            const currentBucket = range[bucketIndex];
+            const nextCountValue = (currentBucket?.count || 0) + 1;
+
+            if (nextCountValue > currentMaxCount) {
+                currentMaxCount = nextCountValue;
+            }
+
+            if (currentBucket) {
+                range[bucketIndex] = {
+                    ...currentBucket,
+                    count: nextCountValue,
+                };
+            }
+        });
+
+        return {histogramRange: range, maxCount: currentMaxCount};
+    }, [tablets, currentMetric, min, max]);
+
+    const [tooltipState, setTooltipState] = React.useState<HistogramTooltipState>({
+        anchor: null,
+        data: null,
+    });
+
+    const handleShowTooltip = React.useCallback(
+        (anchor: HTMLElement, data: HistogramTooltipData) => {
+            setTooltipState({anchor, data});
+        },
+        [],
+    );
+
+    const handleHideTooltip = React.useCallback(() => {
+        setTooltipState({anchor: null, data: null});
+    }, []);
+
+    const renderHistogramItem = (item: HistogramBarData, index: number) => {
+        return (
+            <HistogramBar
+                key={index}
+                data={item}
+                maxCount={maxCount}
+                onShowTooltip={handleShowTooltip}
+                onHideTooltip={handleHideTooltip}
+            />
+        );
+    };
+
+    return (
+        <div className={b()}>
+            {tooltipState.anchor && tooltipState.data ? (
+                <Popup
+                    open
+                    hasArrow
+                    placement={['top', 'bottom']}
+                    anchorElement={tooltipState.anchor}
+                    onOutsideClick={handleHideTooltip}
+                >
+                    <HistogramTooltipContent data={tooltipState.data} />
+                </Popup>
+            ) : null}
+            <div className={b('chart')}>
+                {Boolean(max) && histogramRange.map(renderHistogramItem)}
+                <div className={b('x-min')}>{formatNumber(min)}</div>
+                <div className={b('x-max')}>{formatNumber(max)}</div>
+                <div className={b('y-min')}>0</div>
+                <div className={b('y-max')}>{formatNumber(maxCount)}</div>
+            </div>
+        </div>
+    );
+};
diff --git a/src/containers/Heatmap/Histogram/i18n/en.json b/src/containers/Heatmap/Histogram/i18n/en.json
new file mode 100644
index 0000000000..62c07a4305
--- /dev/null
+++ b/src/containers/Heatmap/Histogram/i18n/en.json
@@ -0,0 +1,5 @@
+{
+  "label_count": "Count",
+  "label_from": "From",
+  "label_to": "To"
+}
diff --git a/src/containers/Heatmap/Histogram/i18n/index.ts b/src/containers/Heatmap/Histogram/i18n/index.ts
new file mode 100644
index 0000000000..6b95155ee5
--- /dev/null
+++ b/src/containers/Heatmap/Histogram/i18n/index.ts
@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-heatmap-histogram';
+
+export default registerKeysets(COMPONENT, {en});
diff --git a/src/containers/ReduxTooltip/ReduxTooltip.js b/src/containers/ReduxTooltip/ReduxTooltip.js
deleted file mode 100644
index b40f1b1f71..0000000000
--- a/src/containers/ReduxTooltip/ReduxTooltip.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import React from 'react';
-
-import {Popup, useVirtualElementRef} from '@gravity-ui/uikit';
-import PropTypes from 'prop-types';
-import {connect} from 'react-redux';
-
-import {hideTooltip} from '../../store/reducers/tooltip';
-import {tooltipTemplates} from '../../utils/tooltip';
-
-import './ReduxTooltip.scss';
-
-const propTypes = {
-    className: PropTypes.string,
-    toolTipVisible: PropTypes.bool,
-    currentHoveredRef: PropTypes.object,
-    data: PropTypes.any,
-    template: PropTypes.func,
-    hideTooltip: PropTypes.func,
-};
-
-function ReduxTooltip(props) {
-    const fakeAnchor = useVirtualElementRef({
-        rect: {top: props.positions?.top, left: props.positions?.left},
-    });
-
-    const handleScroll = React.useCallback(() => {
-        const {hideTooltip, toolTipVisible} = props;
-        if (toolTipVisible) {
-            setTimeout(() => hideTooltip(), 500);
-        }
-    }, [props]);
-
-    React.useEffect(() => {
-        window.addEventListener('scroll', handleScroll, true);
-        return () => {
-            window.removeEventListener('scroll', handleScroll);
-        };
-    }, [handleScroll]);
-
-    const renderPositionPopup = (visible, positions, data, additionalData) => {
-        const {template, popupClassName, hideTooltip} = props;
-
-        return (
-            <React.Fragment>
-                <Popup
-                    open={visible}
-                    placement={['top', 'bottom', 'left', 'right']}
-                    contentClassName={popupClassName}
-                    anchorRef={fakeAnchor}
-                    onOutsideClick={hideTooltip}
-                >
-                    {data && template(data, additionalData)}
-                </Popup>
-            </React.Fragment>
-        );
-    };
-    const renderAnchorPopup = (visible, anchor, data, additionalData) => {
-        const {template, popupClassName, hideTooltip} = props;
-        return (
-            <Popup
-                open={visible}
-                anchorRef={{current: anchor}}
-                hasArrow
-                placement={['top', 'bottom', 'left', 'right']}
-                className={popupClassName}
-                onOutsideClick={hideTooltip}
-            >
-                {data && template(data, additionalData)}
-            </Popup>
-        );
-    };
-
-    const {
-        className = '',
-        toolTipVisible,
-        currentHoveredRef,
-        data,
-        additionalData,
-        positions,
-    } = props;
-
-    return (
-        <div className={`redux-tooltip ${className}`}>
-            {positions
-                ? renderPositionPopup(toolTipVisible, positions, data, additionalData)
-                : renderAnchorPopup(toolTipVisible, currentHoveredRef, data, additionalData)}
-        </div>
-    );
-}
-
-const mapStateToProps = (state) => {
-    const {toolTipVisible, currentHoveredRef, data, templateType, additionalData, positions} =
-        state.tooltip;
-
-    const {popupClassName} = additionalData || {};
-
-    return {
-        toolTipVisible,
-        currentHoveredRef,
-        data,
-        template: tooltipTemplates[templateType],
-        additionalData,
-        positions,
-        popupClassName,
-    };
-};
-
-export default connect(mapStateToProps, {hideTooltip})(ReduxTooltip);
-
-ReduxTooltip.propTypes = propTypes;
diff --git a/src/containers/ReduxTooltip/ReduxTooltip.scss b/src/containers/ReduxTooltip/ReduxTooltip.scss
deleted file mode 100644
index 1e1d33b3eb..0000000000
--- a/src/containers/ReduxTooltip/ReduxTooltip.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@use '../../styles/mixins.scss';
-
-.popup2 {
-    max-width: 300px;
-
-    animation: none !important;
-}
-
-.node-tootltip,
-.histogram-tooltip {
-    padding: 10px;
-
-    &__label {
-        padding-right: 15px;
-
-        color: var(--g-color-text-secondary);
-    }
-}
-
-.cell-tooltip {
-    padding: 10px;
-
-    word-break: break-word;
-}
diff --git a/src/containers/Tenant/Diagnostics/Network/Network.scss b/src/containers/Tenant/Diagnostics/Network/Network.scss
index 753cf305f0..7d7ea882f9 100644
--- a/src/containers/Tenant/Diagnostics/Network/Network.scss
+++ b/src/containers/Tenant/Diagnostics/Network/Network.scss
@@ -141,3 +141,13 @@
         }
     }
 }
+
+.node-tooltip {
+    padding: 10px;
+
+    &__label {
+        padding-right: 15px;
+
+        color: var(--g-color-text-secondary);
+    }
+}
diff --git a/src/containers/Tenant/Diagnostics/Network/Network.tsx b/src/containers/Tenant/Diagnostics/Network/Network.tsx
index fcc91fbe8d..964e03822e 100644
--- a/src/containers/Tenant/Diagnostics/Network/Network.tsx
+++ b/src/containers/Tenant/Diagnostics/Network/Network.tsx
@@ -1,23 +1,22 @@
 import React from 'react';
 
-import {Checkbox, Icon, Loader} from '@gravity-ui/uikit';
+import {Checkbox, Loader} from '@gravity-ui/uikit';
 import {Link} from 'react-router-dom';
 
 import {ResponseError} from '../../../../components/Errors/ResponseError';
-import {Illustration} from '../../../../components/Illustration';
 import {ProblemFilter} from '../../../../components/ProblemFilter/ProblemFilter';
 import {getDefaultNodePath} from '../../../../routes';
 import {networkApi} from '../../../../store/reducers/network/network';
-import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';
-import type {TNetNodeInfo, TNetNodePeerInfo} from '../../../../types/api/netInfo';
+import type {TNetNodeInfo} from '../../../../types/api/netInfo';
 import {cn} from '../../../../utils/cn';
-import {useAutoRefreshInterval, useTypedDispatch} from '../../../../utils/hooks';
+import {useAutoRefreshInterval} from '../../../../utils/hooks';
 import {useWithProblemsQueryParam} from '../../../../utils/hooks/useWithProblemsQueryParam';
 
-import {NodeNetwork} from './NodeNetwork/NodeNetwork';
-import {getConnectedNodesCount} from './utils';
-
-import networkIcon from '../../../../assets/icons/network.svg';
+import {NetworkPlaceholder} from './NetworkPlaceholder/NetworkPlaceholder';
+import {NodeTooltipPopup} from './NodeTooltipPopup/NodeTooltipPopup';
+import {Nodes} from './Nodes/Nodes';
+import i18n from './i18n';
+import {groupNodesByField} from './utils';
 
 import './Network.scss';
 
@@ -27,6 +26,7 @@ interface NetworkProps {
     database: string;
     databaseFullPath: string;
 }
+
 export function Network({database, databaseFullPath}: NetworkProps) {
     const [autoRefreshInterval] = useAutoRefreshInterval();
     const {withProblems, handleWithProblemsChange} = useWithProblemsQueryParam();
@@ -35,6 +35,19 @@ export function Network({database, databaseFullPath}: NetworkProps) {
     const [showId, setShowId] = React.useState(false);
     const [showRacks, setShowRacks] = React.useState(false);
 
+    const [nodeTooltip, setNodeTooltip] = React.useState<{
+        anchor: HTMLDivElement | null;
+        data: {
+            nodeId: number | string;
+            connected?: number;
+            capacity?: number;
+            rack: string;
+        } | null;
+    }>({
+        anchor: null,
+        data: null,
+    });
+
     const {currentData, isFetching, error} = networkApi.useGetNetworkInfoQuery(
         {database, databaseFullPath},
         {
@@ -43,6 +56,37 @@ export function Network({database, databaseFullPath}: NetworkProps) {
     );
     const loading = isFetching && currentData === undefined;
 
+    const netWorkInfo = currentData;
+    const nodes = React.useMemo(
+        () => (netWorkInfo?.Tenants && netWorkInfo.Tenants[0].Nodes) ?? [],
+        [netWorkInfo],
+    );
+
+    const handleShowNodeTooltip = React.useCallback(
+        (
+            anchor: HTMLDivElement,
+            data: {
+                nodeId: number | string;
+                connected?: number;
+                capacity?: number;
+                rack: string;
+            },
+        ) => {
+            setNodeTooltip({anchor, data});
+        },
+        [],
+    );
+
+    const handleHideNodeTooltip = React.useCallback(() => {
+        setNodeTooltip({anchor: null, data: null});
+    }, []);
+
+    const nodesGroupedByType = React.useMemo(() => groupNodesByField(nodes, 'NodeType'), [nodes]);
+    const rightNodes = React.useMemo(
+        () => (clickedNode ? groupNodesByField(clickedNode.Peers ?? [], 'NodeType') : {}),
+        [clickedNode],
+    );
+
     if (loading) {
         return (
             <div className="loader">
@@ -51,17 +95,13 @@ export function Network({database, databaseFullPath}: NetworkProps) {
         );
     }
 
-    const netWorkInfo = currentData;
-    const nodes = (netWorkInfo?.Tenants && netWorkInfo.Tenants[0].Nodes) ?? [];
     if (!error && nodes.length === 0) {
-        return <div className="error">no nodes data</div>;
+        return <div className="error">{i18n('description_no-nodes-data')}</div>;
     }
 
-    const nodesGroupedByType = groupNodesByField(nodes, 'NodeType');
-    const rightNodes = clickedNode ? groupNodesByField(clickedNode.Peers ?? [], 'NodeType') : {};
-
     return (
         <div className={b()}>
+            <NodeTooltipPopup nodeTooltip={nodeTooltip} onClose={handleHideNodeTooltip} />
             {error ? <ResponseError error={error} /> : null}
             {nodes.length > 0 ? (
                 <div className={b('inner')}>
@@ -81,7 +121,7 @@ export function Network({database, databaseFullPath}: NetworkProps) {
                                             }}
                                             checked={showId}
                                         >
-                                            ID
+                                            {i18n('field_id')}
                                         </Checkbox>
                                     </div>
                                     <div className={b('checkbox-wrapper')}>
@@ -91,7 +131,7 @@ export function Network({database, databaseFullPath}: NetworkProps) {
                                             }}
                                             checked={showRacks}
                                         >
-                                            Racks
+                                            {i18n('label_racks')}
                                         </Checkbox>
                                     </div>
                                 </div>
@@ -102,6 +142,8 @@ export function Network({database, databaseFullPath}: NetworkProps) {
                                 showRacks={showRacks}
                                 clickedNode={clickedNode}
                                 onClickNode={setClickedNode}
+                                onShowNodeTooltip={handleShowNodeTooltip}
+                                onHideNodeTooltip={handleHideNodeTooltip}
                             />
                         </div>
 
@@ -109,14 +151,14 @@ export function Network({database, databaseFullPath}: NetworkProps) {
                             {clickedNode ? (
                                 <div>
                                     <div className={b('label')}>
-                                        Connectivity of node{' '}
+                                        {i18n('label_connectivity')}{' '}
                                         <Link
                                             className={b('link')}
                                             to={getDefaultNodePath({id: clickedNode.NodeId})}
                                         >
                                             {clickedNode.NodeId}
                                         </Link>{' '}
-                                        to other nodes
+                                        {i18n('label_to-other-nodes')}
                                     </div>
                                     <div className={b('nodes-row')}>
                                         <Nodes
@@ -126,19 +168,13 @@ export function Network({database, databaseFullPath}: NetworkProps) {
                                             showRacks={showRacks}
                                             clickedNode={clickedNode}
                                             onClickNode={setClickedNode}
+                                            onShowNodeTooltip={handleShowNodeTooltip}
+                                            onHideNodeTooltip={handleHideNodeTooltip}
                                         />
                                     </div>
                                 </div>
                             ) : (
-                                <div className={b('placeholder')}>
-                                    <div className={b('placeholder-img')}>
-                                        <Icon data={networkIcon} width={221} height={204} />
-                                    </div>
-
-                                    <div className={b('placeholder-text')}>
-                                        Select node to see its connectivity to other nodes
-                                    </div>
-                                </div>
+                                <NetworkPlaceholder />
                             )}
                         </div>
                     </div>
@@ -147,168 +183,3 @@ export function Network({database, databaseFullPath}: NetworkProps) {
         </div>
     );
 }
-
-interface NodesProps {
-    nodes: Record<string, (TNetNodeInfo | TNetNodePeerInfo)[]>;
-    isRight?: boolean;
-    showId?: boolean;
-    showRacks?: boolean;
-    clickedNode?: TNetNodeInfo;
-    onClickNode: (node: TNetNodeInfo | undefined) => void;
-}
-function Nodes({nodes, isRight, showId, showRacks, clickedNode, onClickNode}: NodesProps) {
-    const {withProblems} = useWithProblemsQueryParam();
-    const dispatch = useTypedDispatch();
-
-    let problemNodesCount = 0;
-    const result = Object.keys(nodes).map((key, j) => {
-        const nodesGroupedByRack = groupNodesByField(nodes[key], 'Rack');
-        return (
-            <div key={j} className={b('nodes-container', {right: isRight})}>
-                <div className={b('nodes-title')}>{key} nodes</div>
-                <div className={b('nodes')}>
-                    {showRacks
-                        ? Object.keys(nodesGroupedByRack).map((key, i) => (
-                              <div key={i} className={b('rack-column')}>
-                                  <div className={b('rack-index')}>
-                                      {key === 'undefined' ? '?' : key}
-                                  </div>
-                                  {nodesGroupedByRack[key].map((nodeInfo, index) => {
-                                      let capacity, connected;
-                                      if (!isRight && 'Peers' in nodeInfo && nodeInfo.Peers) {
-                                          capacity = Object.keys(nodeInfo.Peers).length;
-                                          connected = getConnectedNodesCount(nodeInfo.Peers);
-                                      }
-
-                                      if (
-                                          (withProblems && capacity !== connected) ||
-                                          !withProblems ||
-                                          isRight
-                                      ) {
-                                          problemNodesCount++;
-                                          return (
-                                              <NodeNetwork
-                                                  key={index}
-                                                  nodeId={nodeInfo.NodeId}
-                                                  showID={showId}
-                                                  rack={nodeInfo.Rack}
-                                                  status={
-                                                      'ConnectStatus' in nodeInfo
-                                                          ? nodeInfo.ConnectStatus
-                                                          : undefined
-                                                  }
-                                                  capacity={capacity}
-                                                  connected={connected}
-                                                  onMouseEnter={(...params) => {
-                                                      dispatch(showTooltip(...params));
-                                                  }}
-                                                  onMouseLeave={() => {
-                                                      dispatch(hideTooltip());
-                                                  }}
-                                                  onClick={
-                                                      isRight
-                                                          ? undefined
-                                                          : () => {
-                                                                onClickNode(
-                                                                    clickedNode &&
-                                                                        nodeInfo.NodeId ===
-                                                                            clickedNode.NodeId
-                                                                        ? undefined
-                                                                        : (nodeInfo as TNetNodeInfo),
-                                                                );
-                                                            }
-                                                  }
-                                                  isBlurred={
-                                                      !isRight &&
-                                                      clickedNode &&
-                                                      clickedNode.NodeId !== nodeInfo.NodeId
-                                                  }
-                                              />
-                                          );
-                                      }
-                                      return null;
-                                  })}
-                              </div>
-                          ))
-                        : nodes[key].map((nodeInfo, index) => {
-                              let capacity, connected;
-                              const peers =
-                                  nodeInfo && 'Peers' in nodeInfo ? nodeInfo.Peers : undefined;
-                              if (!isRight && 'Peers' in nodeInfo && nodeInfo.Peers) {
-                                  capacity = nodeInfo.Peers.length;
-                                  connected = getConnectedNodesCount(peers);
-                              }
-
-                              if (
-                                  (withProblems && capacity !== connected) ||
-                                  !withProblems ||
-                                  isRight
-                              ) {
-                                  problemNodesCount++;
-                                  return (
-                                      <NodeNetwork
-                                          key={index}
-                                          nodeId={nodeInfo.NodeId}
-                                          showID={showId}
-                                          rack={nodeInfo.Rack}
-                                          status={
-                                              'ConnectStatus' in nodeInfo
-                                                  ? nodeInfo.ConnectStatus
-                                                  : undefined
-                                          }
-                                          capacity={peers?.length}
-                                          connected={connected}
-                                          onMouseEnter={(...params) => {
-                                              dispatch(showTooltip(...params));
-                                          }}
-                                          onMouseLeave={() => {
-                                              dispatch(hideTooltip());
-                                          }}
-                                          onClick={
-                                              isRight
-                                                  ? undefined
-                                                  : () => {
-                                                        onClickNode(
-                                                            clickedNode &&
-                                                                nodeInfo.NodeId ===
-                                                                    clickedNode.NodeId
-                                                                ? undefined
-                                                                : (nodeInfo as TNetNodeInfo),
-                                                        );
-                                                    }
-                                          }
-                                          isBlurred={
-                                              !isRight &&
-                                              clickedNode &&
-                                              clickedNode.NodeId !== nodeInfo.NodeId
-                                          }
-                                      />
-                                  );
-                              }
-                              return null;
-                          })}
-                </div>
-            </div>
-        );
-    });
-
-    if (withProblems && problemNodesCount === 0) {
-        return <Illustration name="thumbsUp" width={200} />;
-    } else {
-        return result;
-    }
-}
-
-function groupNodesByField<T extends Pick<TNetNodeInfo, 'NodeType' | 'Rack'>>(
-    nodes: T[],
-    field: 'NodeType' | 'Rack',
-) {
-    return nodes.reduce<Record<string, T[]>>((acc, node) => {
-        if (acc[node[field]]) {
-            acc[node[field]].push(node);
-        } else {
-            acc[node[field]] = [node];
-        }
-        return acc;
-    }, {});
-}
diff --git a/src/containers/Tenant/Diagnostics/Network/NetworkPlaceholder/NetworkPlaceholder.tsx b/src/containers/Tenant/Diagnostics/Network/NetworkPlaceholder/NetworkPlaceholder.tsx
new file mode 100644
index 0000000000..e26961b655
--- /dev/null
+++ b/src/containers/Tenant/Diagnostics/Network/NetworkPlaceholder/NetworkPlaceholder.tsx
@@ -0,0 +1,19 @@
+import {Icon} from '@gravity-ui/uikit';
+
+import {cn} from '../../../../../utils/cn';
+import i18n from '../i18n';
+
+import networkIcon from '../../../../../assets/icons/network.svg';
+
+const b = cn('network');
+
+export function NetworkPlaceholder() {
+    return (
+        <div className={b('placeholder')}>
+            <div className={b('placeholder-img')}>
+                <Icon data={networkIcon} width={221} height={204} />
+            </div>
+            <div className={b('placeholder-text')}>{i18n('description_placeholder')}</div>
+        </div>
+    );
+}
diff --git a/src/containers/Tenant/Diagnostics/Network/NodeNetwork/NodeNetwork.tsx b/src/containers/Tenant/Diagnostics/Network/NodeNetwork/NodeNetwork.tsx
index fbc3a77b0f..47f1853cac 100644
--- a/src/containers/Tenant/Diagnostics/Network/NodeNetwork/NodeNetwork.tsx
+++ b/src/containers/Tenant/Diagnostics/Network/NodeNetwork/NodeNetwork.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 
 import {EFlag} from '../../../../../types/api/enums';
-import type {ITooltipTemplateType} from '../../../../../types/store/tooltip';
 import {cn} from '../../../../../utils/cn';
+import type {NodeTooltipData} from '../NodeTooltipPopup/NodeTooltipPopup';
 
 import './NodeNetwork.scss';
 
@@ -24,7 +24,7 @@ function getNodeModifier(connected = 0, capacity = 0) {
 function noop() {}
 
 interface NodeNetworkProps {
-    onMouseEnter?: (node: HTMLDivElement, data: any, type: ITooltipTemplateType) => void;
+    onMouseEnter?: (node: HTMLDivElement, data: NodeTooltipData) => void;
     onMouseLeave?: () => void;
     nodeId: number | string;
     connected?: number;
@@ -60,7 +60,9 @@ export function NodeNetwork({
                 blur: isBlurred,
             })}
             onMouseEnter={() => {
-                onMouseEnter(ref.current!, {nodeId, connected, capacity, rack}, 'node');
+                if (ref.current) {
+                    onMouseEnter(ref.current, {nodeId, connected, capacity, rack});
+                }
             }}
             onMouseLeave={() => {
                 onMouseLeave();
diff --git a/src/containers/Tenant/Diagnostics/Network/NodeTooltipPopup/NodeTooltipPopup.tsx b/src/containers/Tenant/Diagnostics/Network/NodeTooltipPopup/NodeTooltipPopup.tsx
new file mode 100644
index 0000000000..802225b41d
--- /dev/null
+++ b/src/containers/Tenant/Diagnostics/Network/NodeTooltipPopup/NodeTooltipPopup.tsx
@@ -0,0 +1,62 @@
+import {Popup} from '@gravity-ui/uikit';
+
+import {cn} from '../../../../../utils/cn';
+import i18n from '../i18n';
+
+const tooltipB = cn('node-tooltip');
+
+export interface NodeTooltipData {
+    nodeId: number | string;
+    connected?: number;
+    capacity?: number;
+    rack: string;
+}
+
+export interface NodeTooltipState {
+    anchor: HTMLDivElement | null;
+    data: NodeTooltipData | null;
+}
+
+interface NodeTooltipPopupProps {
+    nodeTooltip: NodeTooltipState;
+    onClose: () => void;
+}
+
+export function NodeTooltipPopup({nodeTooltip, onClose}: NodeTooltipPopupProps) {
+    if (!nodeTooltip.anchor || !nodeTooltip.data) {
+        return null;
+    }
+
+    return (
+        <Popup
+            open
+            hasArrow
+            placement={['top', 'bottom', 'left', 'right']}
+            anchorElement={nodeTooltip.anchor}
+            onOutsideClick={onClose}
+        >
+            <div className={tooltipB()}>
+                <table>
+                    <tbody>
+                        <tr>
+                            <td className={tooltipB('label')}>{i18n('field_id')}</td>
+                            <td className={tooltipB('value')}>{nodeTooltip.data.nodeId || '?'}</td>
+                        </tr>
+                        <tr>
+                            <td className={tooltipB('label')}>{i18n('field_rack')}</td>
+                            <td className={tooltipB('value')}>{nodeTooltip.data.rack || '?'}</td>
+                        </tr>
+                        {nodeTooltip.data.connected && nodeTooltip.data.capacity ? (
+                            <tr>
+                                <td className={tooltipB('label')}>{i18n('field_net')}</td>
+                                <td className={tooltipB('value')}>
+                                    {`${nodeTooltip.data.connected} / ${nodeTooltip.data.capacity}`}
+                                </td>
+                            </tr>
+                        ) : null}
+                    </tbody>
+                </table>
+            </div>
+        </Popup>
+    );
+}
diff --git a/src/containers/Tenant/Diagnostics/Network/Nodes/Nodes.tsx b/src/containers/Tenant/Diagnostics/Network/Nodes/Nodes.tsx
new file mode 100644
index 0000000000..dfe6ed31d5
--- /dev/null
+++ b/src/containers/Tenant/Diagnostics/Network/Nodes/Nodes.tsx
@@ -0,0 +1,306 @@
+import React from 'react';
+
+import {Illustration} from '../../../../../components/Illustration';
+import type {TNetNodeInfo, TNetNodePeerInfo} from '../../../../../types/api/netInfo';
+import {cn} from '../../../../../utils/cn';
+import {useWithProblemsQueryParam} from '../../../../../utils/hooks/useWithProblemsQueryParam';
+import {NodeNetwork} from '../NodeNetwork/NodeNetwork';
+import type {NodeTooltipData} from '../NodeTooltipPopup/NodeTooltipPopup';
+import i18n from '../i18n';
+import {getConnectedNodesCount, groupNodesByField} from '../utils';
+
+const b = cn('network');
+
+export interface NodesProps {
+    nodes: Record<string, (TNetNodeInfo | TNetNodePeerInfo)[]>;
+    isRight?: boolean;
+    showId?: boolean;
+    showRacks?: boolean;
+    clickedNode?: TNetNodeInfo;
+    onClickNode: (node: TNetNodeInfo | undefined) => void;
+    onShowNodeTooltip: (anchor: HTMLDivElement, data: NodeTooltipData) => void;
+    onHideNodeTooltip: () => void;
+}
+
+interface NodeItemProps {
+    nodeInfo: TNetNodeInfo | TNetNodePeerInfo;
+    index: number;
+    isRight?: boolean;
+    showId?: boolean;
+    clickedNode?: TNetNodeInfo;
+    capacity?: number;
+    connected?: number;
+    onClickNode: (node: TNetNodeInfo | undefined) => void;
+    onShowNodeTooltip: (anchor: HTMLDivElement, data: NodeTooltipData) => void;
+    onHideNodeTooltip: () => void;
+}
+
+function NodeItem({
+    nodeInfo,
+    index,
+    isRight,
+    showId,
+    clickedNode,
+    capacity,
+    connected,
+    onClickNode,
+    onShowNodeTooltip,
+    onHideNodeTooltip,
+}: NodeItemProps) {
+    const handleClick = isRight
+        ? undefined
+        : () => {
+              onClickNode(
+                  clickedNode && nodeInfo.NodeId === clickedNode.NodeId
+                      ? undefined
+                      : (nodeInfo as TNetNodeInfo),
+              );
+          };
+
+    return (
+        <NodeNetwork
+            key={index}
+            nodeId={nodeInfo.NodeId}
+            showID={showId}
+            rack={nodeInfo.Rack}
+            status={'ConnectStatus' in nodeInfo ? nodeInfo.ConnectStatus : undefined}
+            capacity={capacity}
+            connected={connected}
+            onMouseEnter={onShowNodeTooltip}
+            onMouseLeave={onHideNodeTooltip}
+            onClick={handleClick}
+            isBlurred={!isRight && clickedNode && clickedNode.NodeId !== nodeInfo.NodeId}
+        />
+    );
+}
+
+function getNodeCapacityAndConnected(
+    nodeInfo: TNetNodeInfo | TNetNodePeerInfo,
+    isRight?: boolean,
+    useObjectKeysLength?: boolean,
+) {
+    let capacity: number | undefined;
+    let connected: number | undefined;
+
+    if (!isRight && 'Peers' in nodeInfo && nodeInfo.Peers) {
+        capacity = useObjectKeysLength ? Object.keys(nodeInfo.Peers).length : nodeInfo.Peers.length;
+        connected = getConnectedNodesCount(nodeInfo.Peers);
+    }
+
+    return {capacity, connected};
+}
+
+function shouldShowNode(
+    withProblems: boolean,
+    isRight?: boolean,
+    capacity?: number,
+    connected?: number,
+) {
+    return (withProblems && capacity !== connected) || !withProblems || isRight;
+}
+
+interface RackColumnProps {
+    rackKey: string;
+    rackIndex: number;
+    nodes: (TNetNodeInfo | TNetNodePeerInfo)[];
+    isRight?: boolean;
+    showId?: boolean;
+    clickedNode?: TNetNodeInfo;
+    withProblems: boolean;
+    onClickNode: (node: TNetNodeInfo | undefined) => void;
+    onShowNodeTooltip: (anchor: HTMLDivElement, data: NodeTooltipData) => void;
+    onHideNodeTooltip: () => void;
+}
+
+function RackColumn({
+    rackKey,
+    rackIndex,
+    nodes,
+    isRight,
+    showId,
+    clickedNode,
+    withProblems,
+    onClickNode,
+    onShowNodeTooltip,
+    onHideNodeTooltip,
+}: RackColumnProps) {
+    return (
+        <div key={rackIndex} className={b('rack-column')}>
+            <div className={b('rack-index')}>{rackKey === 'undefined' ? '?' : rackKey}</div>
+            {nodes.map((nodeInfo, index) => {
+                const {capacity, connected} = getNodeCapacityAndConnected(nodeInfo, isRight, true);
+
+                if (shouldShowNode(withProblems, isRight, capacity, connected)) {
+                    return (
+                        <NodeItem
+                            key={index}
+                            nodeInfo={nodeInfo}
+                            index={index}
+                            isRight={isRight}
+                            showId={showId}
+                            clickedNode={clickedNode}
+                            capacity={capacity}
+                            connected={connected}
+                            onClickNode={onClickNode}
+                            onShowNodeTooltip={onShowNodeTooltip}
+                            onHideNodeTooltip={onHideNodeTooltip}
+                        />
+                    );
+                }
+                return null;
+            })}
+        </div>
+    );
+}
+
+interface FlatNodesListProps {
+    nodes: (TNetNodeInfo | TNetNodePeerInfo)[];
+    isRight?: boolean;
+    showId?: boolean;
+    clickedNode?: TNetNodeInfo;
+    withProblems: boolean;
+    onClickNode: (node: TNetNodeInfo | undefined) => void;
+    onShowNodeTooltip: (anchor: HTMLDivElement, data: NodeTooltipData) => void;
+    onHideNodeTooltip: () => void;
+}
+
+function FlatNodesList({
+    nodes,
+    isRight,
+    showId,
+    clickedNode,
+    withProblems,
+    onClickNode,
+    onShowNodeTooltip,
+    onHideNodeTooltip,
+}: FlatNodesListProps) {
+    return (
+        <React.Fragment>
+            {nodes.map((nodeInfo, index) => {
+                const peers = nodeInfo && 'Peers' in nodeInfo ? nodeInfo.Peers : undefined;
+                const {capacity, connected} = getNodeCapacityAndConnected(nodeInfo, isRight, false);
+
+                if (shouldShowNode(withProblems, isRight, capacity, connected)) {
+                    return (
+                        <NodeItem
+                            key={index}
+                            nodeInfo={nodeInfo}
+                            index={index}
+                            isRight={isRight}
+                            showId={showId}
+                            clickedNode={clickedNode}
+                            capacity={peers?.length}
+                            connected={connected}
+                            onClickNode={onClickNode}
+                            onShowNodeTooltip={onShowNodeTooltip}
+                            onHideNodeTooltip={onHideNodeTooltip}
+                        />
+                    );
+                }
+                return null;
+            })}
+        </React.Fragment>
+    );
+}
+
+function countDisplayedNodes(
+    nodes: NodesProps['nodes'],
+    withProblems: boolean,
+    isRight?: boolean,
+    showRacks?: boolean,
+) {
+    let count = 0;
+
+    Object.keys(nodes).forEach((nodeTypeKey) => {
+        if (showRacks) {
+            const nodesGroupedByRack = groupNodesByField(nodes[nodeTypeKey], 'Rack');
+
+            Object.keys(nodesGroupedByRack).forEach((rackKey) => {
+                nodesGroupedByRack[rackKey].forEach((nodeInfo) => {
+                    const {capacity, connected} = getNodeCapacityAndConnected(
+                        nodeInfo,
+                        isRight,
+                        true,
+                    );
+
+                    if (shouldShowNode(withProblems, isRight, capacity, connected)) {
+                        count++;
+                    }
+                });
+            });
+        } else {
+            nodes[nodeTypeKey].forEach((nodeInfo) => {
+                const {capacity, connected} = getNodeCapacityAndConnected(nodeInfo, isRight, false);
+
+                if (shouldShowNode(withProblems, isRight, capacity, connected)) {
+                    count++;
+                }
+            });
+        }
+    });
+
+    return count;
+}
+
+export function Nodes({
+    nodes,
+    isRight,
+    showId,
+    showRacks,
+    clickedNode,
+    onClickNode,
+    onShowNodeTooltip,
+    onHideNodeTooltip,
+}: NodesProps) {
+    const {withProblems} = useWithProblemsQueryParam();
+
+    const displayedNodesCount = React.useMemo(
+        () => countDisplayedNodes(nodes, withProblems, isRight, showRacks),
+        [nodes, withProblems, isRight, showRacks],
+    );
+
+    const result = Object.keys(nodes).map((nodeTypeKey, j) => {
+        const nodesGroupedByRack = groupNodesByField(nodes[nodeTypeKey], 'Rack');
+        return (
+            <div key={j} className={b('nodes-container', {right: isRight})}>
+                <div className={b('nodes-title')}>{i18n('label_nodes', {type: nodeTypeKey})}</div>
+                <div className={b('nodes')}>
+                    {showRacks ? (
+                        Object.keys(nodesGroupedByRack).map((rackKey, i) => (
+                            <RackColumn
+                                key={i}
+                                rackKey={rackKey}
+                                rackIndex={i}
+                                nodes={nodesGroupedByRack[rackKey]}
+                                isRight={isRight}
+                                showId={showId}
+                                clickedNode={clickedNode}
+                                withProblems={withProblems}
+                                onClickNode={onClickNode}
+                                onShowNodeTooltip={onShowNodeTooltip}
+                                onHideNodeTooltip={onHideNodeTooltip}
+                            />
+                        ))
+                    ) : (
+                        <FlatNodesList
+                            nodes={nodes[nodeTypeKey]}
+                            isRight={isRight}
+                            showId={showId}
+                            clickedNode={clickedNode}
+                            withProblems={withProblems}
+                            onClickNode={onClickNode}
+                            onShowNodeTooltip={onShowNodeTooltip}
+                            onHideNodeTooltip={onHideNodeTooltip}
+                        />
+                    )}
+                </div>
+            </div>
+        );
+    });
+
+    if (withProblems && displayedNodesCount === 0) {
+        return <Illustration name="thumbsUp" width={200} />;
+    }
+
+    return result;
+}
diff --git a/src/containers/Tenant/Diagnostics/Network/i18n/en.json b/src/containers/Tenant/Diagnostics/Network/i18n/en.json
new file mode 100644
index 0000000000..b26df5f1b6
--- /dev/null
+++ b/src/containers/Tenant/Diagnostics/Network/i18n/en.json
@@ -0,0 +1,11 @@
+{
+  "field_rack": "Rack",
+  "field_net": "Net",
+  "field_id": "ID",
+  "label_nodes": "{{type}} nodes",
+  "label_connectivity": "Connectivity of node",
+  "label_to-other-nodes": "to other nodes",
+  "label_racks": "Racks",
+  "description_placeholder": "Select node to see its connectivity to other nodes",
+  "description_no-nodes-data": "no nodes data"
+}
diff --git a/src/containers/Tenant/Diagnostics/Network/i18n/index.ts b/src/containers/Tenant/Diagnostics/Network/i18n/index.ts
new file mode 100644
index 0000000000..cdd9ef7aa1
--- /dev/null
+++ b/src/containers/Tenant/Diagnostics/Network/i18n/index.ts
@@ -0,0 +1,7 @@
+import {registerKeysets} from '../../../../../utils/i18n';
+
+import en from './en.json';
+
+const COMPONENT = 'ydb-tenant-diagnostics-network';
+
+export default registerKeysets(COMPONENT, {en});
diff --git a/src/containers/Tenant/Diagnostics/Network/utils.ts b/src/containers/Tenant/Diagnostics/Network/utils.ts
index 37af9b5e54..80e702bad5 100644
--- a/src/containers/Tenant/Diagnostics/Network/utils.ts
+++ b/src/containers/Tenant/Diagnostics/Network/utils.ts
@@ -1,6 +1,20 @@
-import type {TNetNodePeerInfo} from '../../../../types/api/netInfo';
+import type {TNetNodeInfo, TNetNodePeerInfo} from '../../../../types/api/netInfo';
 
 // determine how many nodes have status Connected "true"
 export const getConnectedNodesCount = (peers: TNetNodePeerInfo[] | undefined) => {
     return peers?.reduce((acc, item) => (item.Connected ? acc + 1 : acc), 0);
 };
+
+export function groupNodesByField<T extends Pick<TNetNodeInfo, 'NodeType' | 'Rack'>>(
+    nodes: T[],
+    field: 'NodeType' | 'Rack',
+) {
+    return nodes.reduce<Record<string, T[]>>((acc, node) => {
+        if (acc[node[field]]) {
+            acc[node[field]].push(node);
+        } else {
+            acc[node[field]] = [node];
+        }
+        return acc;
+    }, {});
+}
diff --git a/src/store/configureStore.ts b/src/store/configureStore.ts
index 8ce666ba69..7946c4ab90 100644
--- a/src/store/configureStore.ts
+++ b/src/store/configureStore.ts
@@ -11,7 +11,6 @@ import {getUrlData} from './getUrlData';
 import rootReducer from './reducers';
 import {api as storeApi} from './reducers/api';
 import {syncUserSettingsFromLS} from './reducers/settings/settings';
-import {UPDATE_REF} from './reducers/tooltip';
 import getLocationMiddleware from './state-url-mapping';
 
 export let backend: string | undefined,
@@ -34,16 +33,12 @@ function _configureStore<
         preloadedState,
         middleware: (getDefaultMiddleware) =>
             getDefaultMiddleware({
-                immutableCheck: checksDisabled
-                    ? false
-                    : {
-                          ignoredPaths: ['tooltip.currentHoveredRef'],
-                      },
+                immutableCheck: checksDisabled ? false : undefined,
                 serializableCheck: checksDisabled
                     ? false
                     : {
-                          ignoredPaths: ['tooltip.currentHoveredRef', 'api'],
-                          ignoredActions: [UPDATE_REF, 'api/sendQuery/rejected'],
+                          ignoredPaths: ['api'],
+                          ignoredActions: ['api/sendQuery/rejected'],
                       },
             }).concat(locationMiddleware, ...middleware),
     });
diff --git a/src/store/reducers/index.ts b/src/store/reducers/index.ts
index a395229e56..59b44c9cef 100644
--- a/src/store/reducers/index.ts
+++ b/src/store/reducers/index.ts
@@ -16,14 +16,12 @@ import settings from './settings/settings';
 import shardsWorkload from './shardsWorkload/shardsWorkload';
 import singleClusterMode from './singleClusterMode';
 import tenant from './tenant/tenant';
-import tooltip from './tooltip';
 
 export const rootReducer = {
     [api.reducerPath]: api.reducer,
     singleClusterMode,
     cluster,
     tenant,
-    tooltip,
     schema,
     partitions,
     query,
diff --git a/src/store/reducers/tooltip.ts b/src/store/reducers/tooltip.ts
deleted file mode 100644
index fc1d141270..0000000000
--- a/src/store/reducers/tooltip.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-import type {Reducer} from '@reduxjs/toolkit';
-import isEqual from 'lodash/isEqual';
-
-import type {
-    ITooltipAction,
-    ITooltipPositions,
-    ITooltipState,
-    ITooltipTemplateType,
-} from '../../types/store/tooltip';
-
-const HIDE_TOOLTIP = 'tooltip/HIDE_TOOLTIP';
-export const UPDATE_REF = 'tooltip/UPDATE_REF';
-
-const initialState: ITooltipState = {
-    toolTipVisible: false,
-    currentHoveredRef: undefined,
-    data: undefined,
-    templateType: 'cell',
-};
-
-const tooltip: Reducer<ITooltipState, ITooltipAction> = (state = initialState, action) => {
-    switch (action.type) {
-        case HIDE_TOOLTIP: {
-            return {
-                ...state,
-                currentHoveredRef: undefined,
-                toolTipVisible: false,
-            };
-        }
-
-        case UPDATE_REF: {
-            if (action.templateType === 'cell' && isEqual(action.node, state.currentHoveredRef)) {
-                return {
-                    ...state,
-                    currentHoveredRef: undefined,
-                    toolTipVisible: false,
-                };
-            }
-
-            return {
-                ...state,
-                toolTipVisible: true,
-                currentHoveredRef: action.node,
-                positions: action.positions,
-                data: action.data,
-                additionalData: action.additionalData,
-                templateType: action.templateType,
-            };
-        }
-        default: {
-            return state;
-        }
-    }
-};
-
-export const hideTooltip = () => {
-    return {type: HIDE_TOOLTIP} as const;
-};
-
-export const showTooltip = (
-    node: EventTarget | null,
-    data: any,
-    templateType: ITooltipTemplateType,
-    additionalData?: any,
-    positions?: ITooltipPositions,
-) => {
-    return {
-        type: UPDATE_REF,
-        node,
-        data,
-        templateType,
-        additionalData,
-        positions,
-    };
-};
-
-export default tooltip;
diff --git a/src/types/store/tooltip.ts b/src/types/store/tooltip.ts
deleted file mode 100644
index 338f1af28c..0000000000
--- a/src/types/store/tooltip.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import type {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
-import type {tooltipTemplates} from '../../utils/tooltip';
-
-export type ITooltipTemplateType = keyof typeof tooltipTemplates;
-
-export interface ITooltipPositions {
-    left: number;
-    top: number;
-}
-
-export interface ITooltipState {
-    toolTipVisible: boolean;
-    positions?: ITooltipPositions;
-    currentHoveredRef?: EventTarget | null;
-    templateType: ITooltipTemplateType;
-    data?: any;
-    additionalData?: any;
-}
-
-type ShowTooltipFunction = typeof showTooltip;
-
-export type ITooltipAction = ReturnType<typeof hideTooltip> | ReturnType<ShowTooltipFunction>;
diff --git a/src/utils/tooltip.js b/src/utils/tooltip.js
deleted file mode 100644
index f163a0a55c..0000000000
--- a/src/utils/tooltip.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import {TabletTooltipContent} from '../components/TooltipsContent';
-
-import {cn} from './cn';
-
-const nodeB = cn('node-tootltip');
-
-const NodeTooltip = (props) => {
-    const {data} = props;
-    return (
-        data && (
-            <div className={nodeB()}>
-                <table>
-                    <tbody>
-                        <tr>
-                            <td className={nodeB('label')}>ID</td>
-                            <td className={nodeB('value')}>{data.nodeId || '?'}</td>
-                        </tr>
-                        <tr>
-                            <td className={nodeB('label')}>Rack</td>
-                            <td className={nodeB('value')}>{data.rack || '?'}</td>
-                        </tr>
-                        {data.connected && data.capacity ? (
-                            <tr>
-                                <td className={nodeB('label')}>Net</td>
-                                <td className={nodeB('value')}>
-                                    {`${data.connected} / ${data.capacity}`}
-                                </td>
-                            </tr>
-                        ) : null}
-                    </tbody>
-                </table>
-            </div>
-        )
-    );
-};
-
-const histogramB = cn('histogram-tooltip');
-
-const HistogramTooltip = (props) => {
-    const {data} = props;
-    return (
-        data && (
-            <div className={histogramB()}>
-                <table>
-                    <tbody>
-                        <tr>
-                            <td className={histogramB('label')}>Count</td>
-                            <td className={histogramB('value')}>{data.count || '?'}</td>
-                        </tr>
-                        <tr>
-                            <td className={histogramB('label')}>From</td>
-                            <td className={histogramB('value')}>{data.leftBound || '?'}</td>
-                        </tr>
-                        <tr>
-                            <td className={histogramB('label')}>To</td>
-                            <td className={histogramB('value')}>{data.rightBound || '?'}</td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-        )
-    );
-};
-
-const cellB = cn('cell-tooltip');
-
-export const tooltipTemplates = {
-    tablet: (data) => <TabletTooltipContent data={data} />,
-    node: (data) => <NodeTooltip data={data} />,
-    histogram: (data) => <HistogramTooltip data={data} />,
-    cell: (data) => <div className={cellB()}>{data}</div>,
-};