tooltips on file names

libs/remix-ui/vertical-icons-panel/src/lib/components/Icon.tsx

@@ -86,7 +86,11 @@ const Icon = ({iconRecord, verticalIconPlugin, contextMenuAction, theme}: IconPr
 
   return (
     <>
-      <CustomTooltip placement={name === 'settings' ? 'right' : name === 'search' ? 'top' : name === 'udapp' ? 'bottom' : 'top'} tooltipText={title} delay={{show: 1000, hide: 0}}>
+      <CustomTooltip
+        placement={name === 'settings' ? 'right' : name === 'search' ? 'top' : name === 'udapp' ? 'bottom' : 'top'}
+        tooltipText={title}
+        delay={{show: 1000, hide: 0}}
+      >
         <div
           className={`remixui_icon m-2  pt-1`}
           onClick={() => {

libs/remix-ui/workspace/src/lib/components/file-label.tsx

@@ -1,5 +1,7 @@
 // eslint-disable-next-line no-use-before-define
 import {fileDecoration} from '@remix-ui/file-decorators'
+import {CustomTooltip} from '@remix-ui/helper'
+import {FormattedMessage} from 'react-intl'
 import React, {useEffect, useRef, useState} from 'react'
 import {FileType} from '../types'
 export interface FileLabelProps {
@@ -65,6 +67,8 @@ export const FileLabel = (props: FileLabelProps) => {
     labelRef.current.innerText = file.name
   }
 
+  // The tooltip is setted up on the label and not the whole line to avoid unnecessary tooltips on the short filenames.
+  // It has the delay for the same reason.
   return (
     <div
       className="remixui_items d-inline-block w-100"
@@ -74,9 +78,17 @@ export const FileLabel = (props: FileLabelProps) => {
       onKeyDown={handleEditInput}
       onBlur={handleEditBlur}
     >
-      <span className={`remixui_label ${fileStateClasses} ` + (file.isDirectory ? 'folder' : 'remixui_leaf')} data-path={file.path}>
-        {file.name}
-      </span>
+      <CustomTooltip
+        placement="top"
+        delay={{show: 1000, hide: 0}}
+        tooltipText={`${file.name}`}
+        tooltipId={`fileExplorer.${file.path}`}
+        tooltipClasses="text-nowrap"
+      >
+        <span className={`remixui_label ${fileStateClasses} ` + (file.isDirectory ? 'folder' : 'remixui_leaf')} data-path={file.path}>
+          {file.name}
+        </span>
+      </CustomTooltip>
     </div>
   )
 }