button tooltip from b90e32886a019e0e55af8d8d6f289312527d2fed

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;
+    }
+}