feat(tree-view): show tooltip with full node name on hover

src/components/TreeView/TreeView.scss

@@ -7,6 +7,7 @@ $step-offset: 24px;
 
 .ydb-tree-view {
     --ydb-tree-view-level: 0;
+    $icon-height: 24px;
 
     $root: &;
     font-size: 13px;
@@ -48,6 +49,7 @@ $step-offset: 24px;
         flex-grow: 1;
         display: flex;
         align-items: center;
+        justify-content: space-between;
         overflow: hidden;
     }
 
@@ -56,17 +58,22 @@ $step-offset: 24px;
         display: flex;
         align-items: center;
         justify-content: center;
-        width: 24px;
-        height: 24px;
+        width: $icon-height;
+        height: $icon-height;
         color: var(--g-color-text-hint);
 
         svg {
             display: block;
         }
     }
 
+    &__label {
+        display: inline-flex;
+        align-items: center;
+        min-width: 0;
+    }
+
     &__text {
-        flex-grow: 1;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;

src/components/TreeView/TreeView.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type {DropdownMenuItemMixed} from '@gravity-ui/uikit';
-import {DropdownMenu} from '@gravity-ui/uikit';
+import {ActionTooltip, DropdownMenu} from '@gravity-ui/uikit';
 
 import {block} from '../../utils/cn';
 
@@ -18,7 +18,7 @@
     onArrowClick?: () => void;
     onActionsOpenToggle?: (isOpen: boolean) => void;
     hasArrow?: boolean;
     actions?: DropdownMenuItemMixed<any>[];
     additionalNodeElements?: JSX.Element;
     level?: number;
 }
@@ -74,6 +74,9 @@
         containerClassName += ' tree-view_children-collapsed';
     }
 
+    const tooltipContent = title ?? (typeof name === 'string' ? name : '');
+    const isTooltipDisabled = tooltipContent.trim().length === 0;
+
     return (
         <div className={b()} style={{[TREE_LEVEL_CSS_VAR]: level} as React.CSSProperties}>
             <div className="tree-view">
@@ -88,10 +91,12 @@
                         onClick={handleArrowClick}
                     />
                     <div className={b('content')}>
-                        {icon && <div className={b('icon')}>{icon}</div>}
-                        <div className={b('text')} title={title}>
-                            {name}
-                        </div>
+                        <ActionTooltip title={tooltipContent} disabled={isTooltipDisabled}>
+                            <div className={b('label')}>
+                                {icon && <div className={b('icon')}>{icon}</div>}
+                                <div className={b('text')}>{name}</div>
+                            </div>
+                        </ActionTooltip>
                         {actions && actions.length > 0 && (
                             <div className={b('actions')}>
                                 {additionalNodeElements}