= props => {
return (
= props => {
'btn-primary',
children ? 'btn-primary-content' : '',
disabled === true ? 'btn-primary-disabled' : '',
+ toolTip ? 'info-tooltip' : '',
+ tooltipPosition ? `info-tooltip-${tooltipPosition}` : '',
className,
].join(' ')}
>
diff --git a/lama_cleaner/app/src/components/shared/Tooltip.scss b/lama_cleaner/app/src/components/shared/Tooltip.scss
new file mode 100644
index 0000000..6c9e15e
--- /dev/null
+++ b/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;
+ }
+}
\ No newline at end of file
diff --git a/lama_cleaner/app/src/styles/_Colors.scss b/lama_cleaner/app/src/styles/_Colors.scss
index 679f2c9..6abfed1 100644
--- a/lama_cleaner/app/src/styles/_Colors.scss
+++ b/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);
diff --git a/lama_cleaner/app/src/styles/_ColorsDark.scss b/lama_cleaner/app/src/styles/_ColorsDark.scss
index e0b454e..3fa2dcb 100644
--- a/lama_cleaner/app/src/styles/_ColorsDark.scss
+++ b/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);
diff --git a/lama_cleaner/app/src/styles/_index.scss b/lama_cleaner/app/src/styles/_index.scss
index e277d5f..65d0fbd 100644
--- a/lama_cleaner/app/src/styles/_index.scss
+++ b/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
*,