OZG-7047 demo add tooltip variants

alfa-client/apps/demo/src/app/app.component.html

@@ -11,6 +11,106 @@
       <nav>NAV</nav>
     </div>
     <main class="flex-auto bg-background-50 p-6">
+      <div class="my-12 text-text">
+        <h1 class="mb-6 text-2xl font-semibold text-text">Tooltip</h1>
+
+        <h2 class="mb-6 text-xl font-semibold text-text">Tooltip zur als Hauptbeschriftung</h2>
+        <p class="mb-4">via aria-labelledby</p>
+
+        <button
+          type="button"
+          class="group relative box-border flex items-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus"
+          aria-labelledby="tooltip555"
+        >
+          <svg class="w-8 fill-slate-700" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+            <path
+              d="M0 11C0 4.92487 4.92487 0 11 0C17.0751 0 22 4.92487 22 11C22 17.0751 17.0751 22 11 22C4.92487 22 0 17.0751 0 11Z"
+            />
+            <path
+              d="M11 6.87508C10.6828 6.87508 10.3726 6.781 10.1088 6.60473C9.84501 6.42846 9.6394 6.17793 9.51798 5.8848C9.39657 5.59168 9.3648 5.26914 9.42669 4.95796C9.48859 4.64678 9.64137 4.36094 9.86572 4.1366C10.0901 3.91225 10.3759 3.75947 10.6871 3.69757C10.9983 3.63568 11.3208 3.66744 11.6139 3.78886C11.907 3.91027 12.1576 4.11588 12.3339 4.37969C12.5101 4.64349 12.6042 4.95364 12.6042 5.27092C12.6038 5.69623 12.4346 6.10399 12.1339 6.40473C11.8331 6.70547 11.4253 6.87463 11 6.87508Z"
+              fill="white"
+            />
+            <path
+              d="M16.0417 6.898L16.0288 6.90144L16.0168 6.90516C15.9881 6.91318 15.9595 6.92178 15.9308 6.93066C15.3977 7.08706 12.8105 7.81638 10.9877 7.81638C9.29389 7.81638 6.94064 7.18618 6.18783 6.97219C6.1129 6.94322 6.03639 6.91855 5.95866 6.89829C5.41439 6.75506 5.04199 7.30792 5.04199 7.81323C5.04199 8.31368 5.49173 8.55201 5.94577 8.72303V8.73105L8.67342 9.58297C8.95215 9.68982 9.02663 9.79896 9.06301 9.89349C9.18132 10.1969 9.08678 10.7976 9.05327 11.0072L8.88712 12.2963L7.96501 17.3434C7.96215 17.3572 7.95957 17.3712 7.95728 17.3855L7.95069 17.4219C7.88423 17.8845 8.22397 18.3334 8.86736 18.3334C9.42882 18.3334 9.6766 17.9458 9.78402 17.4185C9.78402 17.4185 10.5861 12.9047 10.9871 12.9047C11.3882 12.9047 12.2143 17.4185 12.2143 17.4185C12.3218 17.9458 12.5695 18.3334 13.131 18.3334C13.7761 18.3334 14.1158 17.8825 14.0477 17.4185C14.0417 17.3789 14.0345 17.34 14.0259 17.3022L13.0912 12.2969L12.9253 11.0078C12.8053 10.257 12.9018 10.0089 12.9345 9.95079L12.9368 9.94649C12.9677 9.8892 13.1087 9.76086 13.4375 9.6374L15.995 8.74336C16.0107 8.73918 16.0262 8.73421 16.0414 8.72847C16.4998 8.55659 16.9581 8.31883 16.9581 7.81381C16.9581 7.30878 16.586 6.75506 16.0417 6.898Z"
+              fill="white"
+            />
+          </svg>
+          <span
+            id="tooltip555"
+            class="absolute left-2/4 top-[calc(100%+8px)] hidden min-w-max max-w-xs -translate-x-2/4 rounded-md bg-zinc-700 px-4 py-2 text-sm text-white shadow-lg before:absolute before:left-1/2 before:top-[calc(0%-12px)] before:-translate-x-1/2 before:border-[6px] before:border-solid before:border-transparent before:border-b-zinc-700 group-hover:block group-focus-visible:block dark:bg-zinc-100 dark:text-black dark:before:border-b-zinc-100"
+          >
+            Barrierefreiheitserklärung
+          </span>
+        </button>
+
+        <h2 class="my-6 text-xl font-semibold text-text">Tooltip für zusätzliche Hinweise</h2>
+
+        <p class="mb-4">via aria-describedby</p>
+        <div class="relative inline-block">
+          <button
+            type="button"
+            ng-reflect-ng-class="flex items-center gap-4 rounde"
+            aria-disabled="false"
+            data-test-id=""
+            class="peer box-border flex h-9 min-w-32 items-center gap-4 rounded-md bg-primary px-4 py-2 text-sm font-medium text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus hover:enabled:bg-primary-hover disabled:cursor-wait"
+            aria-describedby="tooltip99"
+          >
+            <div class="flex-grow">Speichern</div>
+          </button>
+
+          <span
+            id="tooltip99"
+            role="tooltip"
+            class="absolute left-2/4 top-[calc(100%+8px)] z-50 hidden min-w-max max-w-xs -translate-x-2/4 rounded-md bg-zinc-700 px-4 py-2 text-sm text-white shadow-lg before:absolute before:left-1/2 before:top-[calc(0%-12px)] before:-translate-x-1/2 before:border-[6px] before:border-solid before:border-transparent before:border-b-zinc-700 peer-hover:block peer-focus:block dark:bg-zinc-100 dark:text-black dark:before:border-b-zinc-100"
+          >
+            und in DMS archivieren
+          </span>
+        </div>
+        <hr class="my-12" />
+        <div class="relative inline-block">
+          <button
+            type="button"
+            class="peer box-border flex items-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus"
+            aria-describedby="tooltip777"
+          >
+            <ods-user-icon role="img" aria-label="Benutzericon" />
+          </button>
+          <span
+            id="tooltip777"
+            role="tooltip"
+            class="absolute left-2/4 top-[calc(100%+8px)] z-50 hidden min-w-max max-w-xs -translate-x-2/4 rounded-md bg-zinc-700 px-4 py-2 text-sm text-white shadow-lg before:absolute before:left-1/2 before:top-[calc(0%-12px)] before:-translate-x-1/2 before:border-[6px] before:border-solid before:border-transparent before:border-b-zinc-700 peer-hover:block peer-focus:block dark:bg-zinc-100 dark:text-black dark:before:border-b-zinc-100"
+          >
+            Kein Bearbeiter zugewiesen
+          </span>
+        </div>
+        <hr class="my-12" />
+
+        <p>
+          Lorem ipsum
+          <span class="relative inline-block">
+            <a
+              href="https://www.dataport.de/"
+              target="_blank"
+              class="peer box-border flex items-center font-medium text-primary underline hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus"
+              aria-describedby="tooltip5"
+            >
+              Dataport
+            </a>
+            <span
+              id="tooltip5"
+              role="tooltip"
+              class="absolute left-2/4 top-[calc(100%+8px)] z-50 hidden min-w-max max-w-xs -translate-x-2/4 rounded-md bg-zinc-700 px-4 py-2 text-sm text-white shadow-lg before:absolute before:left-1/2 before:top-[calc(0%-12px)] before:-translate-x-1/2 before:border-[6px] before:border-solid before:border-transparent before:border-b-zinc-700 peer-hover:block peer-focus:block dark:bg-zinc-100 dark:text-black dark:before:border-b-zinc-100"
+            >
+              Innovativ. Souverän. Sicher.
+            </span>
+          </span>
+          magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
+          gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
+          elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et
+          accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+          amet.
+        </p>
+      </div>
       <div class="my-12">
         <h1 class="mb-6 text-2xl font-semibold text-text">Organisationseinheiten</h1>
         <ods-button text="Organisationseinheit hinzufügen" />

alfa-client/apps/demo/src/app/app.component.ts

@@ -26,6 +26,7 @@ import {
   StampIconComponent,
   TextInputComponent,
   TextareaComponent,
+  UserIconComponent,
 } from '@ods/system';
 
 import { EMPTY_STRING } from '@alfa-client/tech-shared';
@@ -73,6 +74,7 @@ import { CustomStepperComponent } from './components/cdk-demo/custom-stepper.com
     TextInputComponent,
     TextareaComponent,
     ErrorMessageComponent,
+    UserIconComponent,
   ],
   selector: 'app-root',
   templateUrl: './app.component.html',