diff --git a/package.json b/package.json
index 00c65e0..63048ab 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
"autosize": "^6.0.1",
"express": "^4.18.2",
"lodash": "^4.17.21",
+ "ngx-tippy-wrapper": "^6.3.0",
"ngx-toastr": "^18.0.0",
"ngx-transloco-markup": "^5.1.0",
"rxjs": "~7.8.0",
diff --git a/src/app/components/toggle-checkbox/toggle-checkbox.component.html b/src/app/components/toggle-checkbox/toggle-checkbox.component.html
index 3b377b9..8ef0055 100644
--- a/src/app/components/toggle-checkbox/toggle-checkbox.component.html
+++ b/src/app/components/toggle-checkbox/toggle-checkbox.component.html
@@ -2,4 +2,5 @@
{{description()}}
+
diff --git a/src/app/components/toggle-checkbox/toggle-checkbox.component.scss b/src/app/components/toggle-checkbox/toggle-checkbox.component.scss
index 8de7871..8320109 100644
--- a/src/app/components/toggle-checkbox/toggle-checkbox.component.scss
+++ b/src/app/components/toggle-checkbox/toggle-checkbox.component.scss
@@ -48,4 +48,5 @@
margin-left: 5px;
position: relative;
top: 2px;
+ margin-right: 4px;
}
diff --git a/src/app/components/tooltip/tooltip.component.html b/src/app/components/tooltip/tooltip.component.html
new file mode 100644
index 0000000..189678a
--- /dev/null
+++ b/src/app/components/tooltip/tooltip.component.html
@@ -0,0 +1 @@
+
diff --git a/src/app/components/tooltip/tooltip.component.scss b/src/app/components/tooltip/tooltip.component.scss
new file mode 100644
index 0000000..5c8b0fa
--- /dev/null
+++ b/src/app/components/tooltip/tooltip.component.scss
@@ -0,0 +1,3 @@
+fa-icon {
+ cursor: help;
+}
diff --git a/src/app/components/tooltip/tooltip.component.ts b/src/app/components/tooltip/tooltip.component.ts
new file mode 100644
index 0000000..646c818
--- /dev/null
+++ b/src/app/components/tooltip/tooltip.component.ts
@@ -0,0 +1,19 @@
+import {Component, input, signal} from '@angular/core';
+import {faCircleInfo} from "@fortawesome/free-solid-svg-icons";
+import {FaIconComponent} from "@fortawesome/angular-fontawesome";
+import {NgxTippyModule} from "ngx-tippy-wrapper";
+
+@Component({
+ selector: 'app-tooltip',
+ standalone: true,
+ imports: [
+ FaIconComponent,
+ NgxTippyModule
+ ],
+ templateUrl: './tooltip.component.html',
+ styleUrl: './tooltip.component.scss'
+})
+export class TooltipComponent {
+ public text = input.required();
+ public icon = signal(faCircleInfo);
+}
diff --git a/src/app/pages/generate-image/generate-image.component.html b/src/app/pages/generate-image/generate-image.component.html
index 797610e..304ef79 100644
--- a/src/app/pages/generate-image/generate-image.component.html
+++ b/src/app/pages/generate-image/generate-image.component.html
@@ -5,7 +5,7 @@