use radix-ui tooltip

lama_cleaner/app/src/components/CoffeeIcon/CoffeeIcon.tsx

@@ -14,7 +14,6 @@ const CoffeeIcon = () => {
       <Button
         onClick={onClick}
         toolTip="Buy me a coffee"
-        tooltipPosition="bottom"
         style={{ border: 0 }}
         icon={<Coffee />}
       />

lama_cleaner/app/src/components/Editor/Editor.tsx

@@ -59,7 +59,6 @@ import Croper from '../Croper/Croper'
 import emitter, {
   EVENT_PROMPT,
   EVENT_CUSTOM_MASK,
-  CustomMaskEventData,
   EVENT_PAINT_BY_EXAMPLE,
 } from '../../event'
 import FileSelect from '../FileSelect/FileSelect'
@@ -1454,7 +1453,6 @@ export default function Editor() {
         <div className="editor-toolkit-btns">
           <Button
             toolTip="Interactive Segmentation"
-            tooltipPosition="top"
             icon={<CursorArrowRaysIcon />}
             disabled={isInteractiveSeg || isInpainting || !isOriginalLoaded}
             onClick={() => {
@@ -1466,14 +1464,12 @@ export default function Editor() {
           />
           <Button
             toolTip="Reset Zoom & Pan"
-            tooltipPosition="top"
             icon={<ArrowsPointingOutIcon />}
             disabled={scale === minScale && panned === false}
             onClick={resetZoom}
           />
           <Button
             toolTip="Undo"
-            tooltipPosition="top"
             icon={
               <svg
                 width="19"
@@ -1493,7 +1489,6 @@ export default function Editor() {
           />
           <Button
             toolTip="Redo"
-            tooltipPosition="top"
             icon={
               <svg
                 width="19"
@@ -1514,7 +1509,6 @@ export default function Editor() {
           />
           <Button
             toolTip="Show Original"
-            tooltipPosition="top"
             icon={<EyeIcon />}
             className={showOriginal ? 'eyeicon-active' : ''}
             onDown={ev => {
@@ -1536,7 +1530,6 @@ export default function Editor() {
           />
           <Button
             toolTip="Save Image"
-            tooltipPosition="top"
             icon={<ArrowDownTrayIcon />}
             disabled={!renders.length}
             onClick={download}
@@ -1545,7 +1538,6 @@ export default function Editor() {
           {settings.runInpaintingManually && !isSD && !isPaintByExample && (
             <Button
               toolTip="Run Inpainting"
-              tooltipPosition="top"
               icon={
                 <svg
                   width="24"

lama_cleaner/app/src/components/FileManager/FileManager.tsx

@@ -201,7 +201,6 @@ export default function FileManager(props: Props) {
           <Button
             icon={<BarsArrowDownIcon />}
             toolTip="Descending order"
-            tooltipPosition="bottom"
             onClick={() => {
               setSortOrder(SortOrder.DESCENDING)
             }}
@@ -212,7 +211,6 @@ export default function FileManager(props: Props) {
           <Button
             icon={<BarsArrowUpIcon />}
             toolTip="Ascending order"
-            tooltipPosition="bottom"
             onClick={() => {
               setSortOrder(SortOrder.ASCENDING)
             }}

lama_cleaner/app/src/components/Header/Header.tsx

@@ -63,7 +63,6 @@ const Header = () => {
               icon={<FolderIcon />}
               style={{ border: 0 }}
               toolTip="Open File Manager"
-              tooltipPosition="bottom"
               onClick={() => {
                 setShowFileManager(true)
               }}
@@ -78,7 +77,6 @@ const Header = () => {
               style={{ border: 0, gap: 0 }}
               disabled={isInpainting}
               toolTip="Upload image"
-              tooltipPosition="bottom"
             >
               <input
                 style={{ display: 'none' }}
@@ -109,7 +107,6 @@ const Header = () => {
                 style={{ border: 0 }}
                 disabled={isInpainting}
                 toolTip="Upload custom mask"
-                tooltipPosition="bottom"
               >
                 <input
                   style={{ display: 'none' }}

lama_cleaner/app/src/components/Settings/SettingIcon.tsx

@@ -15,7 +15,6 @@ const SettingIcon = () => {
       <Button
         onClick={onClick}
         toolTip="Settings"
-        tooltipPosition="bottom"
         style={{ border: 0 }}
         icon={
           <svg

lama_cleaner/app/src/components/Shortcuts/Shortcuts.tsx

@@ -22,7 +22,6 @@ const Shortcuts = () => {
       <Button
         onClick={shortcutStateHandler}
         toolTip="Hotkeys"
-        tooltipPosition="bottom"
         disabled={shortcutVisibility}
         style={{ border: 0 }}
         icon={

lama_cleaner/app/src/components/SidePanel/PESidePanel.tsx

@@ -36,7 +36,6 @@ const PESidePanel = () => {
         <Button
           border
           toolTip="Upload example image"
-          tooltipPosition="top"
           icon={<UploadIcon />}
           style={{ padding: '0.3rem', gap: 0 }}
         >

lama_cleaner/app/src/components/shared/Button.tsx

@@ -1,4 +1,5 @@
 import React, { ReactNode } from 'react'
+import Tooltip from './Tooltip'
 
 interface ButtonProps {
   border?: boolean
@@ -7,7 +8,6 @@ interface ButtonProps {
   className?: string
   icon?: ReactNode
   toolTip?: string
-  tooltipPosition?: string
   onKeyDown?: () => void
   onClick?: () => void
   onDown?: (ev: PointerEvent) => void
@@ -23,7 +23,6 @@ const Button: React.FC<ButtonProps> = props => {
     disabled,
     icon,
     toolTip,
-    tooltipPosition,
     onKeyDown,
     onClick,
     onDown,
@@ -37,32 +36,31 @@ const Button: React.FC<ButtonProps> = props => {
   }
 
   return (
-    <div
-      role="button"
-      data-tooltip={toolTip}
-      style={style}
-      onKeyDown={onKeyDown}
-      onClick={blurOnClick}
-      onPointerDown={(ev: React.PointerEvent<HTMLDivElement>) => {
-        onDown?.(ev.nativeEvent)
-      }}
-      onPointerUp={(ev: React.PointerEvent<HTMLDivElement>) => {
-        onUp?.(ev.nativeEvent)
-      }}
-      tabIndex={-1}
-      className={[
-        'btn-primary',
-        children ? 'btn-primary-content' : '',
-        disabled === true ? 'btn-primary-disabled' : '',
-        toolTip ? 'info-tooltip' : '',
-        tooltipPosition ? `info-tooltip-${tooltipPosition}` : '',
-        className,
-        border ? `btn-border` : '',
-      ].join(' ')}
-    >
-      {icon}
-      {children ? <span>{children}</span> : null}
-    </div>
+    <Tooltip content={toolTip}>
+      <div
+        role="button"
+        style={style}
+        onKeyDown={onKeyDown}
+        onClick={blurOnClick}
+        onPointerDown={(ev: React.PointerEvent<HTMLDivElement>) => {
+          onDown?.(ev.nativeEvent)
+        }}
+        onPointerUp={(ev: React.PointerEvent<HTMLDivElement>) => {
+          onUp?.(ev.nativeEvent)
+        }}
+        tabIndex={-1}
+        className={[
+          'btn-primary',
+          children ? 'btn-primary-content' : '',
+          disabled === true ? 'btn-primary-disabled' : '',
+          className,
+          border ? `btn-border` : '',
+        ].join(' ')}
+      >
+        {icon}
+        {children ? <span>{children}</span> : null}
+      </div>
+    </Tooltip>
   )
 }
 

lama_cleaner/app/src/components/shared/Tooltip.scss

@@ -1,40 +1,3 @@
-$tooltip-translate: 100%;
-$tooltip-margin: 1.5rem;
-
-.info-tooltip {
-  &:hover:before {
-    content: attr(data-tooltip);
-    position: absolute;
-    background-color: var(--tooltip-bg);
-    color: var(--tooltip-text-color);
-    padding: 0.5rem;
-    border-radius: 0.3rem;
-    z-index: 2;
-    opacity: 0;
-    animation-name: opacityReveal;
-    animation-duration: 0.2s;
-    animation-fill-mode: forwards;
-    animation-delay: 0.2s;
-    box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
-      hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
-  }
-}
-
-.info-tooltip-top {
-  &:hover:before {
-    transform: translateY(calc($tooltip-translate * -1));
-    margin-bottom: $tooltip-margin;
-  }
-}
-
-.info-tooltip-bottom {
-  &:hover:before {
-    transform: translateY($tooltip-translate);
-    margin-top: $tooltip-margin;
-  }
-}
-
-// radix-ui
 .tooltip-trigger {
   all: unset;
   display: flex;