Add tooltip infos

src/app/campaign/pages/graph-page/graph-page.component.html

@@ -1,7 +1,14 @@
 <app-page-container>
   <article class="container">
     <h1 class="text-center mb-3">Wiki Overview</h1>
-    <h2 class="fs-5">Node Categories</h2>
+    <h2 class="fs-5">
+      <app-info-circle-tooltip
+        [text]="'Node Categories'"
+        [tooltip]="
+          'Nodes in the graph represent Articles in the Wiki that repell each other'
+        "
+      ></app-info-circle-tooltip>
+    </h2>
     <div class="row mb-3">
       @for (category of nodeCategories(); track category.label) {
         <app-selectable-entry
@@ -14,7 +21,14 @@ <h2 class="fs-5">Node Categories</h2>
         ></app-selectable-entry>
       }
     </div>
-    <h2 class="fs-5">Link Categories</h2>
+    <h2 class="fs-5">
+      <app-info-circle-tooltip
+        [text]="'Link Categories'"
+        [tooltip]="
+          'The different kinds of connections between articles. Some are inferred automatically, the rest are custom-links added by users.'
+        "
+      ></app-info-circle-tooltip>
+    </h2>
     <div class="row mb-3">
       @let linkCategories = (linkCategories$ | async) ?? [];
       @for (category of linkCategories; track category) {

src/app/campaign/pages/graph-page/graph-page.component.ts

@@ -52,6 +52,7 @@ import { GraphService } from 'src/design/organisms/graph/graph.service';
 import { filterNil } from 'src/utils/rxjs-operators';
 import { capitalize } from 'src/utils/string';
 import { CardComponent } from '../../../../design/atoms/card/card.component';
+import { InfoCircleTooltipComponent } from '../../../../design/atoms/info-circle-tooltip/info-circle-tooltip.component';
 import { PlaceholderComponent } from '../../../../design/atoms/placeholder/placeholder.component';
 import { SelectableEntryComponent } from '../../../../design/atoms/selectable-entry/selectable-entry.component';
 import { ArticleFooterComponent } from '../../../../design/molecules/article-footer/article-footer.component';
@@ -85,6 +86,7 @@ import { GraphPageStore } from './graph-page.store';
     GraphSettingsModalComponent,
     PlaceholderComponent,
     AsyncPipe,
+    InfoCircleTooltipComponent,
   ],
   templateUrl: './graph-page.component.html',
   styleUrl: './graph-page.component.scss',