add fixes to tooltips

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

@@ -17,12 +17,12 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     display: '',
     content: ''
   })
-  const [atAddressOptions, setAtAddressOptions] = useState<{ title: string, disabled: boolean }>({
+  const [atAddressOptions, setAtAddressOptions] = useState<{ title: string | JSX.Element, disabled: boolean }>({
     title: 'address of contract',
     disabled: true
   })
   const [loadedAddress, setLoadedAddress] = useState<string>('')
-  const [contractOptions, setContractOptions] = useState<{ title: string, disabled: boolean }>({
+  const [contractOptions, setContractOptions] = useState<{ title: string | JSX.Element, disabled: boolean }>({
     title: 'Please compile *.sol file to deploy or access a contract',
     disabled: true
   })
@@ -136,12 +136,12 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     if (enable) {
       setAtAddressOptions({
         disabled: false,
-        title: 'Interact with the deployed contract - requires the .abi file or compiled .sol file to be selected in the editor (with the same compiler configuration)'
+        title: <span>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)</span>
       })
     } else {
       setAtAddressOptions({
         disabled: true,
-        title: loadedAddress ? 'Compile a *.sol file or select a *.abi file.' : 'To interact with a deployed contract, enter its address and compile its source *.sol file (with the same compiler settings) or select its .abi file in the editor. '
+        title: loadedAddress ? 'Compile a *.sol file or select a *.abi file.' : <span>To interact with a deployed contract,<br /> enter its address and compile its source *.sol file <br />(with the same compiler settings) or select its .abi file in the editor. </span>
       })
     }
   }
@@ -155,7 +155,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
     } else {
       setContractOptions({
         disabled: true,
-        title: loadType === 'sol' ? 'Select and compile *.sol file to deploy or access a contract.' : 'When there is a compiled .sol file, the choice of contracts to deploy or to use with AtAddress is made here.'
+        title: loadType === 'sol' ? 'Select and compile *.sol file to deploy or access a contract.' : <span>When there is a compiled .sol file,<br /> choose the contract to deploy or to use with AtAddress.'</span>
       })
     }
   }
@@ -266,8 +266,8 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
             placement={'right'}
             tooltipClasses="text-wrap"
             tooltipId="info-sync-compiled-contract"
-            tooltipText="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."
+            tooltipText={<span>Click here to import contracts compiled from an external framework.<br />
+              This action is enabled when Remix is connected to an external framework (hardhat, truffle, foundry) through remixd.</span>}
           >
             <button className="btn d-flex py-0" onClick={_ => {
               props.syncContracts()
@@ -326,7 +326,7 @@ export function ContractDropdownUI (props: ContractDropdownProps) {
                   placement={'right'}
                   tooltipClasses="text-wrap"
                   tooltipId="remixIpfsUdappTooltip"
-                  tooltipText="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...)"
+                  tooltipText={<span>Publishing the source code and metadata to IPFS <br />facilitates source code verification using Sourcify and<br /> will greatly foster contract adoption<br /> (auditing, debugging, calling it, etc...)</span>}
                 >
                   <label
                     htmlFor="deployAndRunPublishToIPFS"

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

@@ -46,7 +46,7 @@ export function RecorderUI (props: RecorderProps) {
           placement={'right'}
           tooltipClasses="text-wrap"
           tooltipId="info-recorder"
-          tooltipText="Save transactions (deployed contracts and function executions) and replay them in another environment e.g Transactions created in Remix VM can be replayed in the Injected Provider."
+          tooltipText={<span>Save transactions (deployed contracts and function executions) <br />and replay them in another environment e.g Transactions created <br />in Remix VM can be replayed in the Injected Provider.</span>}
           >
           <i style={{ fontSize: 'medium' }} className={'ml-2 fal fa-info-circle align-self-center'} aria-hidden="true"></i>
         </CustomTooltip>

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

@@ -5,6 +5,7 @@ import Badge from './Badge'
 import { iconBadgeReducer, IconBadgeReducerAction } from '../reducers/iconBadgeReducer'
 import { Plugin } from '@remixproject/engine'
 import { IconRecord } from '../types'
+import { CustomTooltip } from '@remix-ui/helper'
 
 export interface IconStatus {
     key: string
@@ -84,27 +85,31 @@ const Icon = ({
 
   return (
     <>
-      <div
-        className={`remixui_icon m-2  pt-1`}
-        onClick={() => {
-          (verticalIconPlugin as any).toggle(name)
-        }}
-        {...{plugin: name}}
-        title={title}
-        onContextMenu={(e: any) => {
-          e.preventDefault()
-          e.stopPropagation()
-          handleContextMenu(e)
-        }}
-        data-id={`verticalIconsKind${name}`}
-        id={`verticalIconsKind${name}`}
-        ref={iconRef}
+      <CustomTooltip
+        placement="right-start"
+        tooltipText={title}
       >
-        <img data-id={iconRecord.active ? `selected`: ''} className={`${theme === 'dark' ? 'invert' : ''} ${theme} remixui_image ${iconRecord.active ? `selected-${theme}`:''}`} src={icon} alt={name} />
-          <Badge
-            badgeStatus={badgeStatus}
-          />
-      </div>
+        <div
+          className={`remixui_icon m-2  pt-1`}
+          onClick={() => {
+            (verticalIconPlugin as any).toggle(name)
+          }}
+          {...{plugin: name}}
+          onContextMenu={(e: any) => {
+            e.preventDefault()
+            e.stopPropagation()
+            handleContextMenu(e)
+          }}
+          data-id={`verticalIconsKind${name}`}
+          id={`verticalIconsKind${name}`}
+          ref={iconRef}
+        >
+          <img data-id={iconRecord.active ? `selected`: ''} className={`${theme === 'dark' ? 'invert' : ''} ${theme} remixui_image ${iconRecord.active ? `selected-${theme}`:''}`} src={icon} alt={name} />
+            <Badge
+              badgeStatus={badgeStatus}
+            />
+        </div>
+      </CustomTooltip>
       {showContext ? (
         <VerticalIconsContextMenu
           pageX={pageX}

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

@@ -24,7 +24,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
         action: 'publishToGist',
         title: 'Publish all the current workspace files to a github gist',
         icon: 'fab fa-github',
-        placement: 'top-start'
+        placement: 'bottom-start'
       },
       {
         action: 'uploadFile',
@@ -36,7 +36,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
         action: 'updateGist',
         title: 'Update the current [gist] explorer',
         icon: 'fab fa-github',
-        placement: 'right-start'
+        placement: 'bottom-start'
       }
     ].filter(item => props.menuItems && props.menuItems.find((name) => { return name === item.action })),
     actions: {}