chore: test tooltip in table

src/app/pages/tabs-links-page/tabs-subpage/tabs-subpage.component.html

@@ -1,9 +1,117 @@
 <tds-block>
-  <h5>Tab {{ pathIndex }}</h5>
-  <p>
-    Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi aut sit, accusantium, voluptatum
-    dicta nisi laudantium sunt eum, velit porro quas dignissimos obcaecati. Veritatis exercitationem
-    possimus quos animi atque maxime fuga, voluptatum nostrum ab ea voluptate dignissimos non error
-    nobis beatae fugiat temporibus cum at molestias et perferendis iste! Hic?
-  </p>
+  <section *ngIf="pathIndex === 0">
+    <h5>Tab {{ pathIndex }}</h5>
+
+    <table id="customers">
+      <tr>
+        <th>Company</th>
+        <th>Contact</th>
+        <th>Country</th>
+      </tr>
+      <tr>
+        <td>
+          <span id="first-table-item">Element with tooltip & ID</span>
+          <tds-tooltip
+            placement="bottom"
+            text="Text inside Tooltip"
+            selector="#first-table-item"
+            offset-distance="8"
+            offset-skidding="0"
+            mouse-over-tooltip="false"
+            trigger="hover"
+          >
+            <p class="tds-detail-05 tds-u-m0">
+              Paragraph tag inside Tooltip with
+              <b>bold</b>
+              and
+              <i>italic</i>
+              tags too.
+            </p>
+          </tds-tooltip>
+        </td>
+        <td>Maria Anders</td>
+        <td>Germany</td>
+      </tr>
+      <tr>
+        <td>
+          <span id="second-table-item">Element with tooltip & no selector</span>
+          <tds-tooltip placement="bottom" text="Text inside Tooltip">
+            <p class="tds-detail-05 tds-u-m0">
+              Paragraph tag inside Tooltip with
+              <b>bold</b>
+              and
+              <i>italic</i>
+              tags too.
+            </p>
+          </tds-tooltip>
+        </td>
+        <td>Christina Berglund</td>
+        <td>Sweden</td>
+      </tr>
+      <tr>
+        <td>Centro comercial Moctezuma</td>
+        <td>Francisco Chang</td>
+        <td>Mexico</td>
+      </tr>
+      <tr>
+        <td>Ernst Handel</td>
+        <td>Roland Mendel</td>
+        <td>Austria</td>
+      </tr>
+      <tr>
+        <td>Island Trading</td>
+        <td>Helen Bennett</td>
+        <td>UK</td>
+      </tr>
+      <tr>
+        <td>Königlich Essen</td>
+        <td>Philip Cramer</td>
+        <td>Germany</td>
+      </tr>
+      <tr>
+        <td>Laughing Bacchus Winecellars</td>
+        <td>Yoshi Tannamuri</td>
+        <td>Canada</td>
+      </tr>
+      <tr>
+        <td>Magazzini Alimentari Riuniti</td>
+        <td>Giovanni Rovelli</td>
+        <td>Italy</td>
+      </tr>
+      <tr>
+        <td>North/South</td>
+        <td>Simon Crowther</td>
+        <td>UK</td>
+      </tr>
+      <tr>
+        <td>Paris spécialités</td>
+        <td>Marie Bertrand</td>
+        <td>France</td>
+      </tr>
+    </table>
+  </section>
+  <section *ngIf="pathIndex === 1">
+    <h5>Tab {{ pathIndex }}</h5>
+    <p>
+      Locked and loaded pro-sumer software. Feature creep. Product management
+      breakout fastworks lose client to 10:00 meeting, but what do you feel you
+      would bring to the table if you were hired for this position. Regroup make
+      sure to include in your wheelhouse, yet make it more corporate please
+      regroup. Circle back target rich environment cross sabers, so everyone
+      thinks the soup tastes better after they’ve pissed in it, nor we're
+      building the plane while we're flying it.
+    </p>
+  </section>
+  <section *ngIf="pathIndex === 2">
+    <h5>Tab {{ pathIndex }}</h5>
+    <p>
+      That's mint, well done work, but peel the onion. We’re all in this
+      together, even if our businesses function differently great plan! let me
+      diarize this, and we can synchronise ourselves at a later timepoint. Get
+      buy-in zoom meeting at 2:30 today the horse is out of the barn we should
+      leverage existing asserts that ladder up to the message, but per my
+      previous email. Business impact dear hiring manager:, and usabiltiy, and
+      waste of resources drink from the firehose drill down.
+    </p>
+  </section>
 </tds-block>

src/app/pages/tabs-links-page/tabs-subpage/tabs-subpage.component.ts

@@ -1,11 +1,41 @@
 import { Component, Input } from "@angular/core";
 import { TegelModule } from "@scania/tegel-angular-17";
-
+import { CommonModule } from "@angular/common";
 @Component({
   selector: "app-tabs-subpage",
   standalone: true,
   templateUrl: "./tabs-subpage.component.html",
-  imports: [TegelModule],
+  imports: [TegelModule, CommonModule],
+  styles: [
+    `
+      #customers {
+        font-family: Arial, Helvetica, sans-serif;
+        border-collapse: collapse;
+      }
+
+      #customers td,
+      #customers th {
+        border: 1px solid #ddd;
+        padding: 8px;
+      }
+
+      #customers tr:nth-child(even) {
+        background-color: #f2f2f2;
+      }
+
+      #customers tr:hover {
+        background-color: #ddd;
+      }
+
+      #customers th {
+        padding-top: 12px;
+        padding-bottom: 12px;
+        text-align: left;
+        background-color: #04aa6d;
+        color: white;
+      }
+    `,
+  ],
 })
 export default class TabsSubpageComponent {
   @Input() pathIndex: number;