button tooltip from b90e32886a

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

@@ -731,11 +731,15 @@ export default function Editor(props: EditorProps) {
         />
         <div className="editor-toolkit-btns">
           <Button
+            toolTip="Show Full"
+            tooltipPosition="top"
             icon={<ArrowsExpandIcon />}
             disabled={scale === minScale && panned === false}
             onClick={resetZoom}
           />
           <Button
+            toolTip="Undo"
+            tooltipPosition="top"
             icon={
               <svg
                 width="19"
@@ -754,6 +758,8 @@ export default function Editor(props: EditorProps) {
             disabled={disableUndo()}
           />
           <Button
+            toolTip="Show Original"
+            tooltipPosition="top"
             icon={<EyeIcon />}
             className={showOriginal ? 'eyeicon-active' : ''}
             onDown={ev => {
@@ -774,6 +780,8 @@ export default function Editor(props: EditorProps) {
             disabled={renders.length === 0}
           />
           <Button
+            toolTip="Save Image"
+            tooltipPosition="top"
             icon={<DownloadIcon />}
             disabled={!renders.length}
             onClick={download}
@@ -781,6 +789,8 @@ export default function Editor(props: EditorProps) {
 
           {settings.runInpaintingManually && (
             <Button
+              toolTip="Run Inpainting"
+              tooltipPosition="top"
               icon={
                 <svg
                   width="24"

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

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

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

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

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

@@ -1,8 +1,9 @@
+@use '../../styles/Mixins/' as *;
+
 .btn-primary {
   display: grid;
   grid-auto-flow: column;
   column-gap: 1rem;
-  // border: 1px solid var(--btn-border-color);
   color: var(--btn-text-color);
   font-family: 'WorkSans', sans-serif;
   width: max-content;

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

@@ -5,6 +5,8 @@ interface ButtonProps {
   children?: ReactNode
   className?: string
   icon?: ReactNode
+  toolTip?: string
+  tooltipPosition?: string
   onKeyDown?: () => void
   onClick?: () => void
   onDown?: (ev: PointerEvent) => void
@@ -18,6 +20,8 @@ const Button: React.FC<ButtonProps> = props => {
     className,
     disabled,
     icon,
+    toolTip,
+    tooltipPosition,
     onKeyDown,
     onClick,
     onDown,
@@ -33,6 +37,7 @@ const Button: React.FC<ButtonProps> = props => {
   return (
     <div
       role="button"
+      data-tooltip={toolTip}
       style={style}
       onKeyDown={onKeyDown}
       onClick={blurOnClick}
@@ -47,6 +52,8 @@ const Button: React.FC<ButtonProps> = props => {
         'btn-primary',
         children ? 'btn-primary-content' : '',
         disabled === true ? 'btn-primary-disabled' : '',
+        toolTip ? 'info-tooltip' : '',
+        tooltipPosition ? `info-tooltip-${tooltipPosition}` : '',
         className,
       ].join(' ')}
     >

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

@@ -0,0 +1,28 @@
+$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;
+    }
+}
+
+.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;
+    }
+}

lama_cleaner/app/src/styles/_Colors.scss

@@ -9,6 +9,8 @@
   --link-color: rgb(0, 0, 0);
   --border-color: rgb(100, 100, 120);
   --border-color-light: rgba(100, 100, 120, 0.5);
+  --tooltip-bg: rgb(230, 230, 234);
+  --tooltip-text-color: rgb(0, 0,0);
 
   --error-color: rgb(239, 68, 68);
   --success-color: rgb(16, 185, 129);

lama_cleaner/app/src/styles/_ColorsDark.scss

@@ -9,6 +9,8 @@
   --link-color: var(--yellow-accent);
   --border-color: rgb(100, 100, 120);
   --border-color-light: rgba(102, 102, 102);
+  --tooltip-bg: rgb(33, 33, 33);
+  --tooltip-text-color: rgb(210, 210, 210);
 
   // Editor
   --editor-toolkit-bg: rgba(0, 0, 0, 0.5);

lama_cleaner/app/src/styles/_index.scss

@@ -21,6 +21,7 @@
 @use '../components/shared/Switch';
 @use '../components/shared/NumberInput';
 @use '../components/shared/Toast';
+@use '../components/shared/Tooltip';
 
 // Main CSS
 *,