corrected the position of tooltips

apps/remix-ide/src/app/tabs/locales/en/udapp.json

@@ -5,8 +5,8 @@
   "udapp.value": "Value",
   "udapp.contract": "Contract",
   "udapp.compiledBy": "Compiled by {compilerName}",
-  "udapp.infoSyncCompiledContractTooltip": "Click here to import contracts compiled from an external framework.{br}This action is enabled when Remix is connected to an external{br} framework (hardhat, truffle, foundry) through remixd.",
-  "udapp.remixIpfsUdappTooltip": "Publishing the source code and metadata to IPFS facilitates{br} source code verification using Sourcify and will greatly foster{br} contract adoption (auditing, debugging, calling it, etc...)",
+  "udapp.infoSyncCompiledContractTooltip": "Click here to import contracts compiled from an external framework.This action is enabled when Remix is connected to an external framework (hardhat, truffle, foundry) through remixd.",
+  "udapp.remixIpfsUdappTooltip": "Publishing the source code and metadata to IPFS facilitates source code verification using Sourcify and will greatly foster contract adoption (auditing, debugging, calling it, etc...)",
   "udapp.signAMessage": "Sign a message",
   "udapp.enterAMessageToSign": "Enter a message to sign",
   "udapp.hash": "hash",
@@ -19,15 +19,15 @@
   "udapp.or": "or",
   "udapp.atAddress": "At Address",
   "udapp.atAddressOptionsTitle1": "address of contract",
-  "udapp.atAddressOptionsTitle2": "Interact with the deployed contract - requires the .abi file or {br} compiled .sol file to be selected in the editor {br}(with the same compiler configuration)",
+  "udapp.atAddressOptionsTitle2": "Interact with the deployed contract - requires the .abi file or  compiled .sol file to be selected in the editor (with the same compiler configuration)",
   "udapp.atAddressOptionsTitle3": "Compile a *.sol file or select a *.abi file.",
-  "udapp.atAddressOptionsTitle4": "To interact with a deployed contract, either{br} enter its address and compile its source *.sol file {br}(with the same compiler settings) or select its .abi file in the editor. ",
+  "udapp.atAddressOptionsTitle4": "To interact with a deployed contract, either enter its address and compile its source *.sol file (with the same compiler settings) or select its .abi file in the editor. ",
   "udapp.contractOptionsTitle1": "Please compile *.sol file to deploy or access a contract",
   "udapp.contractOptionsTitle2": "Select a compiled contract to deploy or to use with At Address.",
   "udapp.contractOptionsTitle3": "Select and compile *.sol file to deploy or access a contract.",
-  "udapp.contractOptionsTitle4": "When there is a compiled .sol file, choose the {br} contract to deploy or to use with AtAddress.'",
-  "udapp.checkSumWarning": "It seems you are not using a checksumed address.{br}A checksummed address is an address that contains uppercase letters, as specified in {a}.{br}Checksummed addresses are meant to help prevent users from sending transactions to the wrong address.",
-  "udapp.isOverSizePrompt": "Contract creation initialization returns data with length of more than 24576 bytes. The deployment will likely fails. {br}More info: {a}",
+  "udapp.contractOptionsTitle4": "When there is a compiled .sol file, choose the  contract to deploy or to use with AtAddress.'",
+  "udapp.checkSumWarning": "It seems you are not using a checksumed address.A checksummed address is an address that contains uppercase letters, as specified in {a}.Checksummed addresses are meant to help prevent users from sending transactions to the wrong address.",
+  "udapp.isOverSizePrompt": "Contract creation initialization returns data with length of more than 24576 bytes. The deployment will likely fails. More info: {a}",
   "udapp.thisContractMayBeAbstract": "This contract may be abstract, it may not implement an abstract parent's methods completely or it may not invoke an inherited contract's constructor correctly.",
   "udapp.noCompiledContracts": "No compiled contracts",
   "udapp.addressOfContract": "Address of contract",

libs/remix-ui/plugin-manager/src/lib/components/ActivePluginCard.tsx

@@ -22,7 +22,7 @@ function ActivePluginCard ({
               { profile.displayName || profile.name }
               { profile?.maintainedBy?.toLowerCase() == "remix" &&
                 <CustomTooltip
-                  placement="right-end"
+                  placement="right"
                   tooltipId="pluginManagerActiveTitleByRemix"
                   tooltipClasses="text-nowrap"
                   tooltipText="Maintained by Remix"
@@ -32,7 +32,7 @@ function ActivePluginCard ({
               }
               { profile.documentation &&
                 <CustomTooltip
-                  placement="right-end"
+                  placement="right"
                   tooltipId="pluginManagerActiveLinkToDoc"
                   tooltipClasses="text-nowrap"
                   tooltipText="Link to documentation"
@@ -44,7 +44,7 @@ function ActivePluginCard ({
               }
               { profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)
                 ? <CustomTooltip
-                  placement="right-end"
+                  placement="right"
                   tooltipId="pluginManagerActiveVersionAlpha"
                   tooltipClasses="text-nowrap"
                   tooltipText="Version Alpha"
@@ -53,7 +53,7 @@ function ActivePluginCard ({
                 </CustomTooltip>
                 : profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)
                   ? <CustomTooltip
-                    placement="right-end"
+                    placement="right"
                     tooltipId="pluginManagerActiveVersionBeta"
                     tooltipClasses="text-nowrap"
                     tooltipText="Version Beta"
@@ -65,7 +65,7 @@ function ActivePluginCard ({
             </div>
             {
               <CustomTooltip
-                placement="right-end"
+                placement="right"
                 tooltipId={`pluginManagerInactiveActiveBtn${profile.name}`}
                 tooltipClasses="text-nowrap"
                 tooltipText={`Dectivate ${profile.displayName || profile.name}`}

libs/remix-ui/plugin-manager/src/lib/components/InactivePluginCard.tsx

@@ -25,7 +25,7 @@ function InactivePluginCard ({
               { profile.displayName || profile.name }
               { profile?.maintainedBy?.toLowerCase() == "remix" &&
                 <CustomTooltip
-                  placement="right-end"
+                  placement="right"
                   tooltipId="pluginManagerInactiveTitleByRemix"
                   tooltipClasses="text-nowrap"
                   tooltipText="Maintained by Remix"
@@ -35,7 +35,7 @@ function InactivePluginCard ({
               }
               { profile.documentation &&
                 <CustomTooltip
-                  placement="right-end"
+                  placement="right"
                   tooltipId="pluginManagerInactiveTitleLinkToDoc"
                   tooltipClasses="text-nowrap"
                   tooltipText="Link to documentation"
@@ -47,7 +47,7 @@ function InactivePluginCard ({
               }
               { profile.version && profile.version.match(/\b(\w*alpha\w*)\b/g)
                 ? <CustomTooltip
-                  placement="right-end"
+                  placement="right"
                   tooltipId="pluginManagerActiveVersionAlpha"
                   tooltipClasses="text-nowrap"
                   tooltipText="Version Alpha"
@@ -56,7 +56,7 @@ function InactivePluginCard ({
                 </CustomTooltip>
                 : profile.version && profile.version.match(/\b(\w*beta\w*)\b/g)
                   ? <CustomTooltip
-                    placement="right-end"
+                    placement="right"
                     tooltipId="pluginManagerActiveVersionBeta"
                     tooltipClasses="text-nowrap"
                     tooltipText="Version Beta"
@@ -68,7 +68,7 @@ function InactivePluginCard ({
             </div>
             {
               <CustomTooltip
-                placement="right-end"
+                placement="right"
                 tooltipId={`pluginManagerInactiveActiveBtn${profile.name}`}
                 tooltipClasses="text-nowrap"
                 tooltipText={`Activate ${profile.displayName || profile.name}`}

libs/remix-ui/run-tab/src/lib/components/contractGUI.tsx

@@ -283,7 +283,7 @@ export function ContractGUI (props: ContractGUIProps) {
             disabled={(toggleUpgradeImp && !proxyAddress) || props.disabled}
           >
             <CustomTooltip
-              placement={"right-start"}
+              placement={"right"}
               tooltipClasses="text-wrap"
               tooltipId="remixUdappInstanceButtonTooltip"
               tooltipText={toggleUpgradeImp && !proxyAddress ? 'Proxy address cannot be empty' : buttonOptions.title}
@@ -291,13 +291,6 @@ export function ContractGUI (props: ContractGUIProps) {
               <div>{title}</div>
             </CustomTooltip>
           </button>
-        <CustomTooltip
-          placement={"right"}
-          tooltipClasses="text-nowrap"
-          tooltipId="remixContractGuiTooltip"
-          tooltipText={props.funcABI.type === "fallback" ||props.funcABI.type === "receive" ? `'(${props.funcABI.type}')`
-          : props.inputs}
-        >
           <input
             className="form-control"
             data-id={
@@ -308,12 +301,6 @@ export function ContractGUI (props: ContractGUIProps) {
             }
             placeholder={props.inputs}
             onChange={handleBasicInput}
-            data-title={
-              props.funcABI.type === "fallback" ||
-              props.funcABI.type === "receive"
-                ? `'(${props.funcABI.type}')`
-                : props.inputs
-            }
             ref={basicInputRef}
             style={{
               visibility: !(
@@ -325,7 +312,6 @@ export function ContractGUI (props: ContractGUIProps) {
                 : "visible",
             }}
           />
-        </CustomTooltip>
           <i
             className="fas fa-angle-down udapp_methCaret"
             onClick={switchMethodViewOn}

libs/remix-ui/run-tab/src/lib/components/deployButton.tsx

@@ -27,7 +27,7 @@ export function DeployButton (props: DeployButtonProps) {
         </Dropdown.Menu>
       </Dropdown> :
       <CustomTooltip
-        placement="right-start"
+        placement="right"
         tooltipId="deployButtonTooltip"
         tooltipClasses="text-nowrap"
         tooltipText={props.buttonOptions.title}

libs/remix-ui/run-tab/src/lib/components/deployInput.tsx

@@ -8,7 +8,7 @@ export function DeployInput (props: DeployInputProps) {
     <div className="udapp_contractActionsContainerSingle pt-2" style={{ display: 'flex' }}>
       <DeployButton buttonOptions={props.buttonOptions} selectedIndex={props.selectedIndex} setSelectedIndex={props.setSelectedIndex} handleActionClick={props.handleActionClick} deployOptions={props.deployOptions} />
       <CustomTooltip
-        placement="right-start"
+        placement="right"
         tooltipId="deployInputTooltip"
         tooltipClasses="text-nowrap"
         tooltipText={props.funcABI.type === 'fallback' || props.funcABI.type === 'receive' ? `'(${props.funcABI.type}')` : props.inputs}

libs/remix-ui/solidity-compiler/src/lib/compiler-container.tsx

@@ -855,7 +855,7 @@ export const CompilerContainer = (props: CompilerContainerProps) => {
                 <FormattedMessage id='solidity.language' />
               </label>
               <CustomTooltip
-                placement="right-start"
+                placement="right"
                 tooltipId="compilerLabelTooltip"
                 tooltipClasses="text-nowrap"
                 tooltipText={<span>{'Language specification available from   Compiler >= v0.5.7'}</span>}

libs/remix-ui/solidity-compiler/src/lib/contract-selection.tsx

@@ -213,7 +213,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
           <article className="mt-2 pb-0">
             <button id="publishOnIpfs" className="btn btn-secondary btn-block" onClick={() => { handlePublishToStorage('ipfs') }}>
               <CustomTooltip
-                placement="right-start"
+                placement="right"
                 tooltipId="publishOnIpfsTooltip"
                 tooltipClasses="text-nowrap"
                 tooltipText={`${intl.formatMessage({ id: 'solidity.publishOn' })} Ipfs`}
@@ -226,7 +226,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
             </button>
             <button id="publishOnSwarm" className="btn btn-secondary btn-block" onClick={() => { handlePublishToStorage('swarm') }}>
               <CustomTooltip
-                placement="right-start"
+                placement="right"
                 tooltipId="publishOnSwarmTooltip"
                 tooltipClasses="text-nowrap"
                 tooltipText={`${intl.formatMessage({ id: 'solidity.publishOn' })} Swarm`}
@@ -239,7 +239,7 @@ export const ContractSelection = (props: ContractSelectionProps) => {
             </button>
             <button data-id="compilation-details" className="btn btn-secondary btn-block" onClick={() => { details() }}>
               <CustomTooltip
-                placement="right-start"
+                placement="right"
                 tooltipId="CompilationDetailsTooltip"
                 tooltipClasses="text-nowrap"
                 tooltipText="Display Contract Details"

libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx

@@ -14,7 +14,11 @@ export const TreeViewItem = (props: TreeViewItemProps) => {
   return (
     <li ref={innerRef} key={`treeViewLi${id}`} data-id={`treeViewLi${id}`} className='li_tv' {...otherProps}>
       <div key={`treeViewDiv${id}`} data-id={`treeViewDiv${id}`} className={`d-flex flex-row align-items-center ${labelClass}`} onClick={() => !controlBehaviour && setIsExpanded(!isExpanded)}>
-        { children && showIcon ? <div className={isExpanded ? `px-1 ${iconY} caret caret_tv` : `px-1 ${iconX} caret caret_tv`} style={{ visibility: children ? 'visible' : 'hidden' }}></div> : icon ? <div className={`pr-3 pl-1 ${icon} caret caret_tv`}></div> : null }
+        { children && showIcon ? <div
+          className={isExpanded ? `px-1 ${iconY} caret caret_tv` : `px-1 ${iconX} caret caret_tv`}
+          style={{ visibility: children ? 'visible' : 'hidden' }}
+          ></div> : icon ? <div className={`pr-3 pl-1 ${icon} caret caret_tv`}></div> : null
+        }
         <span className='w-100 pl-1'>
           { label }
         </span>

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

@@ -62,7 +62,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
   return (
     <>
       <CustomTooltip
-        placement="top-start"
+        placement="top"
         tooltipId="remixuilabelTooltip"
         tooltipClasses="text-nowrap"
         tooltipText={props.title}
@@ -83,7 +83,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                 <label
                   id={action}
                   data-id={'fileExplorerUploadFile' + action }
-                  className={icon + ' mb-0 remixui_newFile'}
+                  className={icon + ' mb-0 px-1 remixui_newFile'}
                   key={`index-${action}-${placement}-${icon}`}
                 >
                     <input id="fileUpload" data-id="fileExplorerFileUpload" type="file" onChange={(e) => {
@@ -108,7 +108,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                 <label
                   id={action}
                   data-id={'fileExplorerUploadFolder' + action }
-                  className={icon + ' mb-0 remixui_newFile'}
+                  className={icon + ' mb-0 px-1 remixui_newFile'}
                   key={`index-${action}-${placement}-${icon}`}
                 >
                     <input id="folderUpload" data-id="fileExplorerFolderUpload" type="file" onChange={(e) => {
@@ -146,7 +146,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                       state.actions[action]()
                     }
                   }}
-                  className={'newFile ' + icon + ' remixui_newFile'}
+                  className={'newFile ' + icon + ' px-1 remixui_newFile'}
                   key={`${action}-${title}-${index}`}
                 >
                 </span>

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

@@ -454,76 +454,76 @@ export const FileExplorer = (props: FileExplorerProps) => {
 
   return (
     <Drag onFileMoved={handleFileMove} onFolderMoved={handleFolderMove}>
-    <div ref={treeRef} tabIndex={0} style={{ outline: "none" }}>
-      <TreeView id='treeView'>
-        <TreeViewItem id="treeViewItem"
-          controlBehaviour={true}
-          label={
-            <div onClick={handleFileExplorerMenuClick}>
-              <FileExplorerMenu
-                title={''}
-                menuItems={props.menuItems}
-                createNewFile={handleNewFileInput}
-                createNewFolder={handleNewFolderInput}
-                publishToGist={publishToGist}
-                uploadFile={uploadFile}
-                uploadFolder={uploadFolder}
-              />
+      <div ref={treeRef} tabIndex={0} style={{ outline: "none" }}>
+        <TreeView id='treeView'>
+          <TreeViewItem id="treeViewItem"
+            controlBehaviour={true}
+            label={
+              <div onClick={handleFileExplorerMenuClick}>
+                <FileExplorerMenu
+                  title={''}
+                  menuItems={props.menuItems}
+                  createNewFile={handleNewFileInput}
+                  createNewFolder={handleNewFolderInput}
+                  publishToGist={publishToGist}
+                  uploadFile={uploadFile}
+                  uploadFolder={uploadFolder}
+                />
+              </div>
+            }
+            expand={true}>
+            <div className='pb-4 mb-4'>
+              <TreeView id='treeViewMenu'>
+                {
+                  files[ROOT_PATH] && Object.keys(files[ROOT_PATH]).map((key, index) => <FileRender
+                    file={files[ROOT_PATH][key]}
+                    fileDecorations={fileState}
+                    index={index}
+                    focusContext={state.focusContext}
+                    focusEdit={state.focusEdit}
+                    focusElement={props.focusElement}
+                    ctrlKey={state.ctrlKey}
+                    expandPath={props.expandPath}
+                    editModeOff={editModeOff}
+                    handleClickFile={handleClickFile}
+                    handleClickFolder={handleClickFolder}
+                    handleContextMenu={handleContextMenu}
+                    key={index}
+                    showIconsMenu={props.showIconsMenu}
+                    hideIconsMenu={props.hideIconsMenu}
+                    
+                  />)
+                }
+              </TreeView>
             </div>
-          }
-          expand={true}>
-          <div className='pb-4 mb-4'>
-            <TreeView id='treeViewMenu'>
-              {
-                files[ROOT_PATH] && Object.keys(files[ROOT_PATH]).map((key, index) => <FileRender
-                  file={files[ROOT_PATH][key]}
-                  fileDecorations={fileState}
-                  index={index}
-                  focusContext={state.focusContext}
-                  focusEdit={state.focusEdit}
-                  focusElement={props.focusElement}
-                  ctrlKey={state.ctrlKey}
-                  expandPath={props.expandPath}
-                  editModeOff={editModeOff}
-                  handleClickFile={handleClickFile}
-                  handleClickFolder={handleClickFolder}
-                  handleContextMenu={handleContextMenu}
-                  key={index}
-                  showIconsMenu={props.showIconsMenu}
-                  hideIconsMenu={props.hideIconsMenu}
-                  
-                />)
-              }
-            </TreeView>
-          </div>
-        </TreeViewItem>
-      </TreeView>
-      { state.showContextMenu &&
-        <FileExplorerContextMenu
-          actions={props.focusElement.length > 1 ? state.actions.filter(item => item.multiselect) : state.actions.filter(item => !item.multiselect)}
-          hideContextMenu={hideContextMenu}
-          createNewFile={handleNewFileInput}
-          createNewFolder={handleNewFolderInput}
-          deletePath={deletePath}
-          downloadPath={downloadPath}
-          renamePath={editModeOn}
-          runScript={runScript}
-          copy={handleCopyClick}
-          paste={handlePasteClick}
-          copyFileName={handleCopyFileNameClick}
-          copyPath={handleCopyFilePathClick}
-          emit={emitContextMenuEvent}
-          pageX={state.focusContext.x}
-          pageY={state.focusContext.y}
-          path={state.focusContext.element}
-          type={state.focusContext.type}
-          focus={props.focusElement}
-          pushChangesToGist={pushChangesToGist}
-          publishFolderToGist={publishFolderToGist}
-          publishFileToGist={publishFileToGist}
-        />
-      }
-    </div>
+          </TreeViewItem>
+        </TreeView>
+        { state.showContextMenu &&
+          <FileExplorerContextMenu
+            actions={props.focusElement.length > 1 ? state.actions.filter(item => item.multiselect) : state.actions.filter(item => !item.multiselect)}
+            hideContextMenu={hideContextMenu}
+            createNewFile={handleNewFileInput}
+            createNewFolder={handleNewFolderInput}
+            deletePath={deletePath}
+            downloadPath={downloadPath}
+            renamePath={editModeOn}
+            runScript={runScript}
+            copy={handleCopyClick}
+            paste={handlePasteClick}
+            copyFileName={handleCopyFileNameClick}
+            copyPath={handleCopyFilePathClick}
+            emit={emitContextMenuEvent}
+            pageX={state.focusContext.x}
+            pageY={state.focusContext.y}
+            path={state.focusContext.element}
+            type={state.focusContext.type}
+            focus={props.focusElement}
+            pushChangesToGist={pushChangesToGist}
+            publishFolderToGist={publishFolderToGist}
+            publishFileToGist={publishFileToGist}
+          />
+        }
+      </div>
     </Drag>
   )
 }

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

@@ -2,7 +2,7 @@
 import { fileDecoration } from '@remix-ui/file-decorators'
 import React, { useEffect, useRef, useState } from 'react'
 import { FileType } from '../types'
-
+import { CustomTooltip } from '@remix-ui/helper'
 export interface FileLabelProps {
   file: FileType,
   focusEdit: {
@@ -70,12 +70,19 @@ export const FileLabel = (props: FileLabelProps) => {
       onKeyDown={handleEditInput}
       onBlur={handleEditBlur}
     >
+      <CustomTooltip
+        placement={"right"}
+        tooltipClasses="text-wrap"
+        tooltipId={`remixFEItemTooltip${file.path}`}
+        tooltipText={`${file.path}`}
+      >
         <span
           className={`text-nowrap remixui_label ${fileStateClasses} ` + (file.isDirectory ? 'folder' : 'remixui_leaf')}
-          data-path={file.path} title={file.path}
+          data-path={file.path}
         >
           {file.name}
         </span>
+      </CustomTooltip>
     </div>
   )
 }

libs/remix-ui/workspace/src/lib/components/workspace-hamburger-item.tsx

@@ -19,7 +19,7 @@ export function HamburgerMenuItem (props: HamburgerMenuItemProps) {
         <>
           <Dropdown.Item>
             <CustomTooltip
-              placement="right-start"
+              placement="right"
               tooltipId={uid + "Tooltip"}
               tooltipClasses="text-nowrap"
               tooltipText={<FormattedMessage id={'filePanel.workspace.' + props.kind} />}

libs/remix-ui/workspace/src/lib/css/file-explorer.css

@@ -23,9 +23,6 @@ input[type="file"] {
 .remixui_file               {
     padding           : 4px;
 }
-.remixui_newFile            {
-    padding-right     : 10px;
-}
 .remixui_newFile i          {
     cursor            : pointer;
 }

libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@@ -435,7 +435,7 @@ export function Workspace () {
                   </span>
                   {currentWorkspace !== LOCALHOST ? (<span className="remixui_menu remixui_topmenu d-flex justify-content-between align-items-end w-75">
                     <CustomTooltip
-                      placement="top-end"
+                      placement="top"
                       tooltipId="createWorkspaceTooltip"
                       tooltipClasses="text-nowrap"
                       tooltipText={<FormattedMessage id='filePanel.create' />}