match tooltip with figma design

packages/client-core/src/admin/components/project/ProjectTable.tsx

@@ -216,12 +216,12 @@ export default function ProjectTable(props: { search: string }) {
               {row.name}
             </a>
             {!!row.needsRebuild && (
-              <Tooltip title={t('admin:components.project.outdatedBuild')} position="right center">
+              <Tooltip content={t('admin:components.project.outdatedBuild')} position="right center">
                 <HiOutlineExclamationCircle className="text-orange-400" size={22} />
               </Tooltip>
             )}
             {!!row.hasLocalChanges && (
-              <Tooltip title={t('admin:components.project.hasLocalChanges')} position="right center">
+              <Tooltip content={t('admin:components.project.hasLocalChanges')} position="right center">
                 <HiOutlineExclamationCircle className="text-yellow-400" size={22} />
               </Tooltip>
             )}
@@ -237,7 +237,7 @@ export default function ProjectTable(props: { search: string }) {
         ),
         commitSHA: (
           <span className="flex items-center justify-between">
-            <Tooltip title={row.commitSHA || ''}>
+            <Tooltip content={row.commitSHA || ''}>
               <>{row.commitSHA?.slice(0, 8)}</>
             </Tooltip>{' '}
             <CopyText text={row.commitSHA || ''} className="ml-1" />

packages/client-core/src/admin/components/server/ServerTable.tsx

@@ -66,7 +66,7 @@ function ServerStatus({ serverPodInfo }: { serverPodInfo: ServerPodInfoType }) {
       )}
       <div className="flex gap-1">
         {serverPodInfo.containers.map((container) => (
-          <Tooltip key={container.name} title={`${t('admin:components.server.name')}: ${container.name}`}>
+          <Tooltip key={container.name} content={`${t('admin:components.server.name')}: ${container.name}`}>
             <div className={`${containerColor[container.status]} h-3.5 w-3.5 rounded-full`} />
           </Tooltip>
         ))}

packages/client-core/src/admin/components/settings/tabs/project.tsx

@@ -204,7 +204,7 @@ const ProjectTab = forwardRef(({ open }: { open: boolean }, ref: React.MutableRe
                 endComponent={
                   setting.userId && (
                     <Tooltip
-                      title={t('admin:components.setting.project.lastUpdatedBy', { userId: setting.userId })}
+                      content={t('admin:components.setting.project.lastUpdatedBy', { userId: setting.userId })}
                       position="left center"
                     >
                       <HiUser className="mr-2" />

packages/client-core/src/admin/components/user/AccountIdentifiers.tsx

@@ -53,47 +53,47 @@ export default function AccountIdentifiers({ user }: { user: UserType }) {
   return (
     <div className="flex items-center gap-2">
       {appleIp ? (
-        <Tooltip title={appleIp.accountIdentifier!}>
+        <Tooltip content={appleIp.accountIdentifier!}>
           <RiAppleFill className="h-6 w-6" />
         </Tooltip>
       ) : null}
       {discordIp ? (
-        <Tooltip title={discordIp.accountIdentifier!}>
+        <Tooltip content={discordIp.accountIdentifier!}>
           <RiDiscordFill className="h-6 w-6" />
         </Tooltip>
       ) : null}
       {googleIp ? (
-        <Tooltip title={googleIp.accountIdentifier!}>
+        <Tooltip content={googleIp.accountIdentifier!}>
           <RiGoogleFill className="h-6 w-6" />
         </Tooltip>
       ) : null}
       {facebookIp ? (
-        <Tooltip title={facebookIp.accountIdentifier!}>
+        <Tooltip content={facebookIp.accountIdentifier!}>
           <RiMetaFill className="h-6 w-6" />
         </Tooltip>
       ) : null}
       {twitterIp ? (
-        <Tooltip title={twitterIp.accountIdentifier!}>
+        <Tooltip content={twitterIp.accountIdentifier!}>
           <RiTwitterXFill className="h-6 w-6" />
         </Tooltip>
       ) : null}
       {linkedinIp ? (
-        <Tooltip title={linkedinIp.accountIdentifier!}>
+        <Tooltip content={linkedinIp.accountIdentifier!}>
           <RiLinkedinFill className="h-6 w-6" />
         </Tooltip>
       ) : null}
       {githubIp ? (
-        <Tooltip title={githubIp.accountIdentifier!}>
+        <Tooltip content={githubIp.accountIdentifier!}>
           <RiGithubFill className="h-6 w-6" />
         </Tooltip>
       ) : null}
       {smsIp ? (
-        <Tooltip title={smsIp.accountIdentifier!}>
+        <Tooltip content={smsIp.accountIdentifier!}>
           <RiMessage2Line className="h-6 w-6" />
         </Tooltip>
       ) : null}
       {emailIp ? (
-        <Tooltip title={emailIp.accountIdentifier!}>
+        <Tooltip content={emailIp.accountIdentifier!}>
           <MdEmail className="h-6 w-6" />
         </Tooltip>
       ) : null}

packages/editor/src/components/dialogs/ImportSettingsPanelDialog2.tsx

@@ -78,7 +78,7 @@ const ImageCompressionBox = ({ compressProperties }: { compressProperties: State
           onChange={compressProperties.flipY.set}
           label={t('editor:properties.model.transform.flipY')}
         />
-        <Tooltip title={t('editor:properties.model.transform.flipYTooltip')}>
+        <Tooltip content={t('editor:properties.model.transform.flipYTooltip')}>
           <HiOutlineInformationCircle />
         </Tooltip>
       </div>
@@ -88,7 +88,7 @@ const ImageCompressionBox = ({ compressProperties }: { compressProperties: State
           onChange={compressProperties.srgb.set}
           label={t('editor:properties.model.transform.srgb')}
         />
-        <Tooltip title={t('editor:properties.model.transform.srgbTooltip')}>
+        <Tooltip content={t('editor:properties.model.transform.srgbTooltip')}>
           <HiOutlineInformationCircle />
         </Tooltip>
       </div>
@@ -98,7 +98,7 @@ const ImageCompressionBox = ({ compressProperties }: { compressProperties: State
           onChange={compressProperties.mipmaps.set}
           label={t('editor:properties.model.transform.mipmaps')}
         />
-        <Tooltip title={t('editor:properties.model.transform.mipmapsTooltip')}>
+        <Tooltip content={t('editor:properties.model.transform.mipmapsTooltip')}>
           <HiOutlineInformationCircle />
         </Tooltip>
       </div>
@@ -108,7 +108,7 @@ const ImageCompressionBox = ({ compressProperties }: { compressProperties: State
           onChange={compressProperties.normalMap.set}
           label={t('editor:properties.model.transform.normalMap')}
         />
-        <Tooltip title={t('editor:properties.model.transform.normalMapTooltip')}>
+        <Tooltip content={t('editor:properties.model.transform.normalMapTooltip')}>
           <HiOutlineInformationCircle />
         </Tooltip>
       </div>

packages/ui/src/components/editor/input/Group/index.tsx

@@ -30,7 +30,6 @@ import { MdOutlineHelpOutline } from 'react-icons/md'
 import { twMerge } from 'tailwind-merge'
 import Label from '../../../../primitives/tailwind/Label'
 import Tooltip from '../../../../primitives/tailwind/Tooltip'
-import { InfoTooltip } from '../../layout/Tooltip'
 
 /**
  * Used to provide styles for InputGroupContainer div.
@@ -98,21 +97,6 @@ export const InputGroupInfoIcon = ({ onClick = () => {} }) => (
   />
 )
 
-interface InputGroupInfoProp {
-  info: string | JSX.Element
-}
-
-/**
- * Used to render InfoTooltip component.
- */
-export function InputGroupInfo({ info }: InputGroupInfoProp) {
-  return (
-    <InfoTooltip title={info}>
-      <InputGroupInfoIcon />
-    </InfoTooltip>
-  )
-}
-
 export interface InputGroupProps {
   name?: string
   label: string
@@ -142,7 +126,7 @@ export function InputGroup({
       <div className="mr-2 flex">
         <Label className={twMerge('mr-2.5 text-wrap text-end text-xs text-[#A0A1A2]', labelClassName)}>{label}</Label>
         {info && (
-          <Tooltip title={info}>
+          <Tooltip content={info}>
             <LuInfo className={twMerge('h-5 w-5 text-[#A0A1A2]', infoClassName)} />
           </Tooltip>
         )}

packages/ui/src/components/editor/input/Numeric/Stepper/index.tsx

@@ -29,7 +29,7 @@ import { FaChevronLeft, FaChevronRight } from 'react-icons/fa'
 import { t } from 'i18next'
 import { twMerge } from 'tailwind-merge'
 import NumericInput, { NumericInputProp } from '..'
-import { InfoTooltip } from '../../../layout/Tooltip'
+import Tooltip from '../../../../../primitives/tailwind/Tooltip'
 
 export function NumericStepperInput({
   style,
@@ -54,23 +54,23 @@ export function NumericStepperInput({
 
   return (
     <div className={twMerge('flex h-6 w-full flex-1', className)}>
-      <InfoTooltip title={decrementTooltip}>
+      <Tooltip content={decrementTooltip}>
         <button
           className={twMerge('m-0 flex w-5 justify-center p-0 align-middle', 'rounded-bl rounded-tl')}
           onClick={onDecrement}
         >
           <FaChevronLeft fontSize="small" />
         </button>
-      </InfoTooltip>
+      </Tooltip>
       <NumericInput {...rest} onChange={onChange} value={value} mediumStep={mediumStep} />
-      <InfoTooltip title={incrementTooltip}>
+      <Tooltip content={incrementTooltip}>
         <button
           className={twMerge('m-0 flex w-5 justify-center p-0 align-middle', 'rounded-br rounded-tr')}
           onClick={onIncrement}
         >
           <FaChevronRight fontSize="small" />
         </button>
-      </InfoTooltip>
+      </Tooltip>
     </div>
   )
 }

packages/ui/src/components/editor/panels/Assets/container/index.tsx

@@ -150,7 +150,7 @@ const ResourceFile = (props: {
         <FileIcon thumbnailURL={resource.thumbnailURL} type={assetType} />
       </span>
 
-      <Tooltip title={name}>
+      <Tooltip content={name}>
         <span className="line-clamp-1 w-full text-wrap break-all text-sm text-white">{name}</span>
       </Tooltip>
 
@@ -500,13 +500,13 @@ const AssetPanel = () => {
       <div className="mb-1 flex h-8 items-center bg-theme-surface-main">
         <div className="mr-20 flex gap-2">
           <div className="pointer-events-auto flex items-center">
-            <Tooltip title={t('editor:layout.filebrowser.back')} className="left-1">
+            <Tooltip content={t('editor:layout.filebrowser.back')} className="left-1">
               <Button variant="transparent" startIcon={<HiMiniArrowLeft />} className="p-0" onClick={handleBack} />
             </Tooltip>
           </div>
 
           <div className="flex items-center">
-            <Tooltip title={t('editor:layout.filebrowser.refresh')}>
+            <Tooltip content={t('editor:layout.filebrowser.refresh')}>
               <Button variant="transparent" startIcon={<HiMiniArrowPath />} className="p-0" onClick={handleRefresh} />
             </Tooltip>
           </div>

packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx

@@ -185,7 +185,7 @@ export const FileGridItem: React.FC<FileGridItemProps> = (props) => {
         />
       </div>
 
-      <Tooltip title={t(props.item.fullName)}>
+      <Tooltip content={t(props.item.fullName)}>
         <div className="text-secondary line-clamp-1 w-full text-wrap break-all text-sm">{props.item.fullName}</div>
       </Tooltip>
     </div>

packages/ui/src/components/editor/panels/Files/container/index.tsx

@@ -651,7 +651,7 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
         contentStyle={{ background: '#15171b', border: 'solid', borderColor: '#5d646c' }}
         position={'bottom left'}
         trigger={
-          <Tooltip title={t('editor:layout.filebrowser.view-mode.settings.name')}>
+          <Tooltip content={t('editor:layout.filebrowser.view-mode.settings.name')}>
             <Button variant="transparent" startIcon={<IoSettingsSharp />} className="p-0" />
           </Tooltip>
         }
@@ -710,13 +710,13 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
             showBackButton ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0'
           }`}
         >
-          <Tooltip title={t('editor:layout.filebrowser.back')} className="left-1">
+          <Tooltip content={t('editor:layout.filebrowser.back')} className="left-1">
             <Button variant="transparent" startIcon={<IoArrowBack />} className={`p-0`} onClick={onBackDirectory} />
           </Tooltip>
         </div>
 
         <div id="refreshDir" className="flex items-center">
-          <Tooltip title={t('editor:layout.filebrowser.refresh')}>
+          <Tooltip content={t('editor:layout.filebrowser.refresh')}>
             <Button variant="transparent" startIcon={<FiRefreshCcw />} className="p-0" onClick={refreshDirectory} />
           </Tooltip>
         </div>
@@ -753,7 +753,7 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
         </div>
 
         <div id="downloadProject" className="flex items-center">
-          <Tooltip title={t('editor:layout.filebrowser.downloadProject')}>
+          <Tooltip content={t('editor:layout.filebrowser.downloadProject')}>
             <Button
               variant="transparent"
               startIcon={<FiDownload />}
@@ -765,7 +765,7 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
         </div>
 
         <div id="newFolder" className="flex items-center">
-          <Tooltip title={t('editor:layout.filebrowser.addNewFolder')}>
+          <Tooltip content={t('editor:layout.filebrowser.addNewFolder')}>
             <Button variant="transparent" startIcon={<PiFolderPlusBold />} className="p-0" onClick={createNewFolder} />
           </Tooltip>
         </div>

packages/ui/src/components/editor/panels/Properties/index.tsx

@@ -26,9 +26,8 @@ Ethereal Engine. All Rights Reserved.
 import { TabData } from 'rc-dock'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
+import Tooltip from '../../../../primitives/tailwind/Tooltip'
 import { PanelDragContainer, PanelTitle } from '../../layout/Panel'
-import { InfoTooltip } from '../../layout/Tooltip'
-//import styles from '../styles.module.scss'
 import PropertiesPanelContainer from './container'
 
 export const PropertiesPanelTitle = () => {
@@ -38,9 +37,7 @@ export const PropertiesPanelTitle = () => {
     <div>
       <PanelDragContainer>
         <PanelTitle>
-          <InfoTooltip title={t('editor:properties.info')}>
-            <span>{t('editor:properties.title')}</span>
-          </InfoTooltip>
+          <Tooltip content={t('editor:properties.info')}>{t('editor:properties.title')}</Tooltip>
         </PanelTitle>
       </PanelDragContainer>
     </div>

packages/ui/src/components/editor/panels/Properties/material/index.tsx

@@ -56,11 +56,11 @@ import {
 } from '@etherealengine/spatial/src/renderer/materials/MaterialComponent'
 import { formatMaterialArgs, getMaterial } from '@etherealengine/spatial/src/renderer/materials/materialFunctions'
 import Button from '../../../../../primitives/tailwind/Button'
+import Tooltip from '../../../../../primitives/tailwind/Tooltip'
 import InputGroup from '../../../input/Group'
 import SelectInput from '../../../input/Select'
 import StringInput from '../../../input/String'
 import { PanelDragContainer, PanelTitle } from '../../../layout/Panel'
-import { InfoTooltip } from '../../../layout/Tooltip'
 import ParameterInput from '../../../properties/parameter'
 
 type ThumbnailData = {
@@ -312,9 +312,9 @@ export const MaterialPropertyTitle = () => {
     <div className={styles.dockableTab}>
       <PanelDragContainer>
         <PanelTitle>
-          <InfoTooltip title={t('editor:properties.mesh.materialProperties.info')}>
-            <span>{t('editor:properties.mesh.materialProperties.title')}</span>
-          </InfoTooltip>
+          <Tooltip content={t('editor:properties.mesh.materialProperties.info')}>
+            {t('editor:properties.mesh.materialProperties.title')}
+          </Tooltip>
         </PanelTitle>
       </PanelDragContainer>
     </div>