implement tooltip

projects/qd-design-demo/src/app/app.html

@@ -1,5 +1,5 @@
 <div class="horizontal">
-  <qd-button variant="elevated" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()"></qd-button>
+  <qd-button variant="elevated" tooltip="tooltip" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()"></qd-button>
   <qd-button variant="elevated" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-button>
 
   <qd-button variant="filled" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()"></qd-button>
@@ -15,7 +15,7 @@
   <qd-button variant="text" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-button>
 </div>
 <div class="horizontal">
-  <qd-card clickable style="width: 300px" (click)="onClick()">
+  <qd-card clickable tooltip="tooltip" style="width: 300px" (click)="onClick()">
     <figure image class="image-wrapper">
       <img [ngSrc]="'https://i0.wp.com/www.bishoprook.com/wp-content/uploads/2021/05/placeholder-image-gray-16x9-1.png?ssl=1'" fill alt="''"/>
     </figure>

projects/qd-design-demo/src/app/app.ts

@@ -3,10 +3,11 @@ import {QdButton} from '../../../qd-design/src/lib/qd-button/qd-button';
 import {QdButtonType} from '../../../qd-design/src/enums/qd-button-type.enum';
 import {QdCard} from '../../../qd-design/src/lib/qd-card/qd-card';
 import {NgOptimizedImage} from '@angular/common';
+import {QdTooltipDirective} from '../../../qd-design/src/directives/qd-tooltip-directive';
 
 @Component({
   selector: 'app-root',
-  imports: [QdButton, QdCard, NgOptimizedImage],
+  imports: [QdButton, QdCard, NgOptimizedImage, QdTooltipDirective],
   templateUrl: './app.html',
   styleUrl: './app.scss'
 })

projects/qd-design/src/directives/qd-tooltip-directive.ts

@@ -1,11 +1,16 @@
-import {Directive, ElementRef} from '@angular/core';
+import {ComponentRef, Directive, ElementRef, HostListener, input} from '@angular/core';
 import { Overlay, OverlayRef, OverlayPositionBuilder, ConnectionPositionPair } from '@angular/cdk/overlay';
+import {ComponentPortal} from '@angular/cdk/portal';
+import {QdPlainTooltip} from '../lib/qd-plain-tooltip/qd-plain-tooltip';
 
 @Directive({
   standalone: true,
   selector: '[tooltip]'
 })
 export class QdTooltipDirective {
+  text = input<string>('', { alias: 'tooltip' });
+  private overlayRef: OverlayRef | null = null;
+  private tooltipRef: ComponentRef<QdPlainTooltip> | null = null;
 
   constructor(
     private elementRef: ElementRef,
@@ -13,4 +18,55 @@ export class QdTooltipDirective {
     private positionBuilder: OverlayPositionBuilder
   ) {}
 
+  ngOnInit(): void {
+    // Top
+    const positionTop = new ConnectionPositionPair(
+      { originX: 'center', originY: 'top' },
+      { overlayX: 'center', overlayY: 'bottom' },
+      0, -8
+    );
+
+    // Bottom
+    const positionBottom = new ConnectionPositionPair(
+      { originX: 'center', originY: 'bottom' },
+      { overlayX: 'center', overlayY: 'top' },
+      0, 8
+    );
+
+    const positionStrategy = this.positionBuilder
+      .flexibleConnectedTo(this.elementRef)
+      .withPositions([positionTop, positionBottom])
+      .withPush(true);
+
+    this.overlayRef = this.overlay.create({
+      positionStrategy,
+      scrollStrategy: this.overlay.scrollStrategies.reposition(),
+      hasBackdrop: false
+    });
+  }
+
+  @HostListener('mouseenter')
+  show(): void {
+    const content = this.text();
+
+    if (!this.overlayRef || !content || this.overlayRef.hasAttached()) return;
+
+    const tooltipPortal = new ComponentPortal(QdPlainTooltip);
+    this.tooltipRef = this.overlayRef.attach(tooltipPortal);
+
+    this.tooltipRef.setInput("text", content);
+  }
+
+  @HostListener('mouseleave')
+  hide(): void {
+    if (this.overlayRef) {
+      this.overlayRef.detach();
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.overlayRef) {
+      this.overlayRef.dispose();
+    }
+  }
 }

projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.css

@@ -1,17 +1,479 @@
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+:root {
+  /* body - large */
+  --md-sys-typescale-body-large-font-family-name: Roboto;
+  --md-sys-typescale-body-large-font-family-style: Regular;
+  --md-sys-typescale-body-large-font-size: 18px;
+  --md-sys-typescale-body-large-font-weight: 400px;
+  --md-sys-typescale-body-large-letter-spacing: 0.50px;
+  --md-sys-typescale-body-large-line-height: 22px;
+  /* body - medium */
+  --md-sys-typescale-body-medium-font-family-name: Roboto;
+  --md-sys-typescale-body-medium-font-family-style: Regular;
+  --md-sys-typescale-body-medium-font-size: 16px;
+  --md-sys-typescale-body-medium-font-weight: 400px;
+  --md-sys-typescale-body-medium-letter-spacing: 0.25px;
+  --md-sys-typescale-body-medium-line-height: 20px;
+  /* body - small */
+  --md-sys-typescale-body-small-font-family-name: Roboto;
+  --md-sys-typescale-body-small-font-family-style: Regular;
+  --md-sys-typescale-body-small-font-size: 14px;
+  --md-sys-typescale-body-small-font-weight: 400px;
+  --md-sys-typescale-body-small-letter-spacing: 0.40px;
+  --md-sys-typescale-body-small-line-height: 18px;
+  /* display - large */
+  --md-sys-typescale-display-large-font-family-name: Roboto;
+  --md-sys-typescale-display-large-font-family-style: Regular;
+  --md-sys-typescale-display-large-font-size: 51px;
+  --md-sys-typescale-display-large-font-weight: 400px;
+  --md-sys-typescale-display-large-letter-spacing: -0.25px;
+  --md-sys-typescale-display-large-line-height: 61px;
+  /* display - medium */
+  --md-sys-typescale-display-medium-font-family-name: Roboto;
+  --md-sys-typescale-display-medium-font-family-style: Regular;
+  --md-sys-typescale-display-medium-font-size: 42px;
+  --md-sys-typescale-display-medium-font-weight: 400px;
+  --md-sys-typescale-display-medium-letter-spacing: 0px;
+  --md-sys-typescale-display-medium-line-height: 52px;
+  /* display - small */
+  --md-sys-typescale-display-small-font-family-name: Roboto;
+  --md-sys-typescale-display-small-font-family-style: Regular;
+  --md-sys-typescale-display-small-font-size: 40px;
+  --md-sys-typescale-display-small-font-weight: 400px;
+  --md-sys-typescale-display-small-letter-spacing: 0px;
+  --md-sys-typescale-display-small-line-height: 50px;
+  /* headline - large */
+  --md-sys-typescale-headline-large-font-family-name: Roboto;
+  --md-sys-typescale-headline-large-font-family-style: Regular;
+  --md-sys-typescale-headline-large-font-size: 36px;
+  --md-sys-typescale-headline-large-font-weight: 400px;
+  --md-sys-typescale-headline-large-letter-spacing: 0px;
+  --md-sys-typescale-headline-large-line-height: 44px;
+  /* headline - medium */
+  --md-sys-typescale-headline-medium-font-family-name: Roboto;
+  --md-sys-typescale-headline-medium-font-family-style: Regular;
+  --md-sys-typescale-headline-medium-font-size: 32px;
+  --md-sys-typescale-headline-medium-font-weight: 400px;
+  --md-sys-typescale-headline-medium-letter-spacing: 0px;
+  --md-sys-typescale-headline-medium-line-height: 36px;
+  /* headline - small */
+  --md-sys-typescale-headline-small-font-family-name: Roboto;
+  --md-sys-typescale-headline-small-font-family-style: Regular;
+  --md-sys-typescale-headline-small-font-size: 28px;
+  --md-sys-typescale-headline-small-font-weight: 400px;
+  --md-sys-typescale-headline-small-letter-spacing: 0px;
+  --md-sys-typescale-headline-small-line-height: 36px;
+  /* label - large */
+  --md-sys-typescale-label-large-font-family-name: Roboto;
+  --md-sys-typescale-label-large-font-family-style: Regular;
+  --md-sys-typescale-label-large-font-size: 12px;
+  --md-sys-typescale-label-large-font-weight: 500px;
+  --md-sys-typescale-label-large-letter-spacing: 0.10px;
+  --md-sys-typescale-label-large-line-height: 14px;
+  /* label - medium */
+  --md-sys-typescale-label-medium-font-family-name: Roboto;
+  --md-sys-typescale-label-medium-font-family-style: Regular;
+  --md-sys-typescale-label-medium-font-size: 11px;
+  --md-sys-typescale-label-medium-font-weight: 500px;
+  --md-sys-typescale-label-medium-letter-spacing: 0.50px;
+  --md-sys-typescale-label-medium-line-height: 15px;
+  /* label - small */
+  --md-sys-typescale-label-small-font-family-name: Roboto;
+  --md-sys-typescale-label-small-font-family-style: Regular;
+  --md-sys-typescale-label-small-font-size: 10px;
+  --md-sys-typescale-label-small-font-weight: 500px;
+  --md-sys-typescale-label-small-letter-spacing: 0.50px;
+  --md-sys-typescale-label-small-line-height: 14px;
+  /* title - large */
+  --md-sys-typescale-title-large-font-family-name: Roboto;
+  --md-sys-typescale-title-large-font-family-style: Regular;
+  --md-sys-typescale-title-large-font-size: 25px;
+  --md-sys-typescale-title-large-font-weight: 400px;
+  --md-sys-typescale-title-large-letter-spacing: 0px;
+  --md-sys-typescale-title-large-line-height: 31px;
+  /* title - medium */
+  --md-sys-typescale-title-medium-font-family-name: Roboto;
+  --md-sys-typescale-title-medium-font-family-style: Regular;
+  --md-sys-typescale-title-medium-font-size: 22px;
+  --md-sys-typescale-title-medium-font-weight: 500px;
+  --md-sys-typescale-title-medium-letter-spacing: 0.15px;
+  --md-sys-typescale-title-medium-line-height: 28px;
+  /* title - small */
+  --md-sys-typescale-title-small-font-family-name: Roboto;
+  --md-sys-typescale-title-small-font-family-style: Regular;
+  --md-sys-typescale-title-small-font-size: 20px;
+  --md-sys-typescale-title-small-font-weight: 500px;
+  --md-sys-typescale-title-small-letter-spacing: 0.10px;
+  --md-sys-typescale-title-small-line-height: 16px;
+}
+
+.display-large {
+  font-family: var(--md-sys-typescale-display-large-font-family-name);
+  font-size: var(--md-sys-typescale-display-large-font-size);
+  font-style: var(--md-sys-typescale-display-large-font-family-style);
+  font-weight: var(--md-sys-typescale-display-large-font-weight);
+  letter-spacing: var(--md-sys-typescale-display-large-tracking);
+  line-height: var(--md-sys-typescale-display-large-line-height);
+  text-decoration: var(--md-sys-typescale-display-large-text-decoration);
+  text-transform: var(--md-sys-typescale-display-large-text-transform);
+}
+
+.display-medium {
+  font-family: var(--md-sys-typescale-display-medium-font-family-name);
+  font-size: var(--md-sys-typescale-display-medium-font-size);
+  font-style: var(--md-sys-typescale-display-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-display-medium-font-weight);
+  letter-spacing: var(--md-sys-typescale-display-medium-tracking);
+  line-height: var(--md-sys-typescale-display-medium-line-height);
+  text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
+  text-transform: var(--md-sys-typescale-display-medium-text-transform);
+}
+
+.display-small {
+  font-family: var(--md-sys-typescale-display-small-font-family-name);
+  font-size: var(--md-sys-typescale-display-small-font-size);
+  font-style: var(--md-sys-typescale-display-small-font-family-style);
+  font-weight: var(--md-sys-typescale-display-small-font-weight);
+  letter-spacing: var(--md-sys-typescale-display-small-tracking);
+  line-height: var(--md-sys-typescale-display-small-line-height);
+  text-decoration: var(--md-sys-typescale-display-small-text-decoration);
+  text-transform: var(--md-sys-typescale-display-small-text-transform);
+}
+
+.headline-large {
+  font-family: var(--md-sys-typescale-headline-large-font-family-name);
+  font-size: var(--md-sys-typescale-headline-large-font-size);
+  font-style: var(--md-sys-typescale-headline-large-font-family-style);
+  font-weight: var(--md-sys-typescale-headline-large-font-weight);
+  letter-spacing: var(--md-sys-typescale-headline-large-tracking);
+  line-height: var(--md-sys-typescale-headline-large-line-height);
+  text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
+  text-transform: var(--md-sys-typescale-headline-large-text-transform);
+}
+
+.headline-medium {
+  font-family: var(--md-sys-typescale-headline-medium-font-family-name);
+  font-size: var(--md-sys-typescale-headline-medium-font-size);
+  font-style: var(--md-sys-typescale-headline-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-headline-medium-font-weight);
+  letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
+  line-height: var(--md-sys-typescale-headline-medium-line-height);
+  text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
+  text-transform: var(--md-sys-typescale-headline-medium-text-transform);
+}
+
+.headline-small {
+  font-family: var(--md-sys-typescale-headline-small-font-family-name);
+  font-size: var(--md-sys-typescale-headline-small-font-size);
+  font-style: var(--md-sys-typescale-headline-small-font-family-style);
+  font-weight: var(--md-sys-typescale-headline-small-font-weight);
+  letter-spacing: var(--md-sys-typescale-headline-small-tracking);
+  line-height: var(--md-sys-typescale-headline-small-line-height);
+  text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
+  text-transform: var(--md-sys-typescale-headline-small-text-transform);
+}
+
+.body-large {
+  font-family: var(--md-sys-typescale-body-large-font-family-name);
+  font-size: var(--md-sys-typescale-body-large-font-size);
+  font-style: var(--md-sys-typescale-body-large-font-family-style);
+  font-weight: var(--md-sys-typescale-body-large-font-weight);
+  letter-spacing: var(--md-sys-typescale-body-large-tracking);
+  line-height: var(--md-sys-typescale-body-large-line-height);
+  text-decoration: var(--md-sys-typescale-body-large-text-decoration);
+  text-transform: var(--md-sys-typescale-body-large-text-transform);
+}
+
+.body-medium {
+  font-family: var(--md-sys-typescale-body-medium-font-family-name);
+  font-size: var(--md-sys-typescale-body-medium-font-size);
+  font-style: var(--md-sys-typescale-body-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-body-medium-font-weight);
+  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+  line-height: var(--md-sys-typescale-body-medium-line-height);
+  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
+  text-transform: var(--md-sys-typescale-body-medium-text-transform);
+}
+
+.body-small {
+  font-family: var(--md-sys-typescale-body-small-font-family-name);
+  font-size: var(--md-sys-typescale-body-small-font-size);
+  font-style: var(--md-sys-typescale-body-small-font-family-style);
+  font-weight: var(--md-sys-typescale-body-small-font-weight);
+  letter-spacing: var(--md-sys-typescale-body-small-tracking);
+  line-height: var(--md-sys-typescale-body-small-line-height);
+  text-decoration: var(--md-sys-typescale-body-small-text-decoration);
+  text-transform: var(--md-sys-typescale-body-small-text-transform);
+}
+
+.label-large {
+  font-family: var(--md-sys-typescale-label-large-font-family-name);
+  font-size: var(--md-sys-typescale-label-large-font-size);
+  font-style: var(--md-sys-typescale-label-large-font-family-style);
+  font-weight: var(--md-sys-typescale-label-large-font-weight);
+  letter-spacing: var(--md-sys-typescale-label-large-tracking);
+  line-height: var(--md-sys-typescale-label-large-line-height);
+  text-decoration: var(--md-sys-typescale-label-large-text-decoration);
+  text-transform: var(--md-sys-typescale-label-large-text-transform);
+}
+
+.label-medium {
+  font-family: var(--md-sys-typescale-label-medium-font-family-name);
+  font-size: var(--md-sys-typescale-label-medium-font-size);
+  font-style: var(--md-sys-typescale-label-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-label-medium-font-weight);
+  letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+  line-height: var(--md-sys-typescale-label-medium-line-height);
+  text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
+  text-transform: var(--md-sys-typescale-label-medium-text-transform);
+}
+
+.label-small {
+  font-family: var(--md-sys-typescale-label-small-font-family-name);
+  font-size: var(--md-sys-typescale-label-small-font-size);
+  font-style: var(--md-sys-typescale-label-small-font-family-style);
+  font-weight: var(--md-sys-typescale-label-small-font-weight);
+  letter-spacing: var(--md-sys-typescale-label-small-tracking);
+  line-height: var(--md-sys-typescale-label-small-line-height);
+  text-decoration: var(--md-sys-typescale-label-small-text-decoration);
+  text-transform: var(--md-sys-typescale-label-small-text-transform);
+}
+
+.title-large {
+  font-family: var(--md-sys-typescale-title-large-font-family-name);
+  font-size: var(--md-sys-typescale-title-large-font-size);
+  font-style: var(--md-sys-typescale-title-large-font-family-style);
+  font-weight: var(--md-sys-typescale-title-large-font-weight);
+  letter-spacing: var(--md-sys-typescale-title-large-tracking);
+  line-height: var(--md-sys-typescale-title-large-line-height);
+  text-decoration: var(--md-sys-typescale-title-large-text-decoration);
+  text-transform: var(--md-sys-typescale-title-large-text-transform);
+}
+
+.title-medium {
+  font-family: var(--md-sys-typescale-title-medium-font-family-name);
+  font-size: var(--md-sys-typescale-title-medium-font-size);
+  font-style: var(--md-sys-typescale-title-medium-font-family-style);
+  font-weight: var(--md-sys-typescale-title-medium-font-weight);
+  letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+  line-height: var(--md-sys-typescale-title-medium-line-height);
+  text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
+  text-transform: var(--md-sys-typescale-title-medium-text-transform);
+}
+
+.title-small {
+  font-family: var(--md-sys-typescale-title-small-font-family-name);
+  font-size: var(--md-sys-typescale-title-small-font-size);
+  font-style: var(--md-sys-typescale-title-small-font-family-style);
+  font-weight: var(--md-sys-typescale-title-small-font-weight);
+  letter-spacing: var(--md-sys-typescale-title-small-tracking);
+  line-height: var(--md-sys-typescale-title-small-line-height);
+  text-decoration: var(--md-sys-typescale-title-small-text-decoration);
+  text-transform: var(--md-sys-typescale-title-small-text-transform);
+}
+
+.scrollable-y {
+  max-height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.height-100 {
+  height: 100%;
+  max-height: 100%;
+  min-height: 100%;
+}
+
+.height-100-vh {
+  height: 100vh;
+  max-height: 100vh;
+  min-height: 100vh;
+}
+
+.width-100 {
+  max-width: 100%;
+  min-width: 100%;
+  width: 100%;
+}
+
+.width-100-vw {
+  max-width: 100vw;
+  min-width: 100vw;
+  width: 100vw;
+}
+
+body {
+  --md-sys-color-primary: rgb(73 93 146);
+  --md-sys-color-surface-tint: rgb(73 93 146);
+  --md-sys-color-on-primary: rgb(255 255 255);
+  --md-sys-color-primary-container: rgb(218 225 255);
+  --md-sys-color-on-primary-container: rgb(49 69 120);
+  --md-sys-color-secondary: rgb(88 94 113);
+  --md-sys-color-on-secondary: rgb(255 255 255);
+  --md-sys-color-secondary-container: rgb(221 226 249);
+  --md-sys-color-on-secondary-container: rgb(65 70 89);
+  --md-sys-color-tertiary: rgb(115 84 113);
+  --md-sys-color-on-tertiary: rgb(255 255 255);
+  --md-sys-color-tertiary-container: rgb(255 214 249);
+  --md-sys-color-on-tertiary-container: rgb(90 61 88);
+  --md-sys-color-error: rgb(186 26 26);
+  --md-sys-color-on-error: rgb(255 255 255);
+  --md-sys-color-error-container: rgb(255 218 214);
+  --md-sys-color-on-error-container: rgb(147 0 10);
+  --md-sys-color-background: rgb(250 248 255);
+  --md-sys-color-on-background: rgb(26 27 33);
+  --md-sys-color-surface: rgb(250 248 255);
+  --md-sys-color-on-surface: rgb(26 27 33);
+  --md-sys-color-surface-variant: rgb(225 226 236);
+  --md-sys-color-on-surface-variant: rgb(69 70 79);
+  --md-sys-color-outline: rgb(117 118 128);
+  --md-sys-color-outline-variant: rgb(197 198 208);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(47 48 54);
+  --md-sys-color-inverse-on-surface: rgb(241 240 247);
+  --md-sys-color-inverse-primary: rgb(179 197 255);
+  --md-sys-color-primary-fixed: rgb(218 225 255);
+  --md-sys-color-on-primary-fixed: rgb(0 24 73);
+  --md-sys-color-primary-fixed-dim: rgb(179 197 255);
+  --md-sys-color-on-primary-fixed-variant: rgb(49 69 120);
+  --md-sys-color-secondary-fixed: rgb(221 226 249);
+  --md-sys-color-on-secondary-fixed: rgb(21 27 44);
+  --md-sys-color-secondary-fixed-dim: rgb(193 198 221);
+  --md-sys-color-on-secondary-fixed-variant: rgb(65 70 89);
+  --md-sys-color-tertiary-fixed: rgb(255 214 249);
+  --md-sys-color-on-tertiary-fixed: rgb(43 18 43);
+  --md-sys-color-tertiary-fixed-dim: rgb(225 187 220);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(90 61 88);
+  --md-sys-color-surface-dim: rgb(218 217 224);
+  --md-sys-color-surface-bright: rgb(250 248 255);
+  --md-sys-color-surface-container-lowest: rgb(255 255 255);
+  --md-sys-color-surface-container-low: rgb(244 243 250);
+  --md-sys-color-surface-container: rgb(238 237 244);
+  --md-sys-color-surface-container-high: rgb(232 231 239);
+  --md-sys-color-surface-container-highest: rgb(227 226 233);
+  transition: background-color 0.3s, color 0.3s;
+}
+
+@media (prefers-color-scheme: dark) {
+  body:not(.light-theme) {
+    --md-sys-color-primary: rgb(179 197 255);
+    --md-sys-color-surface-tint: rgb(179 197 255);
+    --md-sys-color-on-primary: rgb(25 46 96);
+    --md-sys-color-primary-container: rgb(49 69 120);
+    --md-sys-color-on-primary-container: rgb(218 225 255);
+    --md-sys-color-secondary: rgb(193 198 221);
+    --md-sys-color-on-secondary: rgb(42 48 66);
+    --md-sys-color-secondary-container: rgb(65 70 89);
+    --md-sys-color-on-secondary-container: rgb(221 226 249);
+    --md-sys-color-tertiary: rgb(225 187 220);
+    --md-sys-color-on-tertiary: rgb(66 39 65);
+    --md-sys-color-tertiary-container: rgb(90 61 88);
+    --md-sys-color-on-tertiary-container: rgb(255 214 249);
+    --md-sys-color-error: rgb(255 180 171);
+    --md-sys-color-on-error: rgb(105 0 5);
+    --md-sys-color-error-container: rgb(147 0 10);
+    --md-sys-color-on-error-container: rgb(255 218 214);
+    --md-sys-color-background: rgb(18 19 24);
+    --md-sys-color-on-background: rgb(227 226 233);
+    --md-sys-color-surface: rgb(18 19 24);
+    --md-sys-color-on-surface: rgb(227 226 233);
+    --md-sys-color-surface-variant: rgb(69 70 79);
+    --md-sys-color-on-surface-variant: rgb(197 198 208);
+    --md-sys-color-outline: rgb(143 144 154);
+    --md-sys-color-outline-variant: rgb(69 70 79);
+    --md-sys-color-shadow: rgb(0 0 0);
+    --md-sys-color-scrim: rgb(0 0 0);
+    --md-sys-color-inverse-surface: rgb(227 226 233);
+    --md-sys-color-inverse-on-surface: rgb(47 48 54);
+    --md-sys-color-inverse-primary: rgb(73 93 146);
+    --md-sys-color-primary-fixed: rgb(218 225 255);
+    --md-sys-color-on-primary-fixed: rgb(0 24 73);
+    --md-sys-color-primary-fixed-dim: rgb(179 197 255);
+    --md-sys-color-on-primary-fixed-variant: rgb(49 69 120);
+    --md-sys-color-secondary-fixed: rgb(221 226 249);
+    --md-sys-color-on-secondary-fixed: rgb(21 27 44);
+    --md-sys-color-secondary-fixed-dim: rgb(193 198 221);
+    --md-sys-color-on-secondary-fixed-variant: rgb(65 70 89);
+    --md-sys-color-tertiary-fixed: rgb(255 214 249);
+    --md-sys-color-on-tertiary-fixed: rgb(43 18 43);
+    --md-sys-color-tertiary-fixed-dim: rgb(225 187 220);
+    --md-sys-color-on-tertiary-fixed-variant: rgb(90 61 88);
+    --md-sys-color-surface-dim: rgb(18 19 24);
+    --md-sys-color-surface-bright: rgb(56 57 63);
+    --md-sys-color-surface-container-lowest: rgb(13 14 19);
+    --md-sys-color-surface-container-low: rgb(26 27 33);
+    --md-sys-color-surface-container: rgb(30 31 37);
+    --md-sys-color-surface-container-high: rgb(41 42 47);
+    --md-sys-color-surface-container-highest: rgb(51 52 58);
+  }
+}
+body.dark-theme {
+  --md-sys-color-primary: rgb(179 197 255);
+  --md-sys-color-surface-tint: rgb(179 197 255);
+  --md-sys-color-on-primary: rgb(25 46 96);
+  --md-sys-color-primary-container: rgb(49 69 120);
+  --md-sys-color-on-primary-container: rgb(218 225 255);
+  --md-sys-color-secondary: rgb(193 198 221);
+  --md-sys-color-on-secondary: rgb(42 48 66);
+  --md-sys-color-secondary-container: rgb(65 70 89);
+  --md-sys-color-on-secondary-container: rgb(221 226 249);
+  --md-sys-color-tertiary: rgb(225 187 220);
+  --md-sys-color-on-tertiary: rgb(66 39 65);
+  --md-sys-color-tertiary-container: rgb(90 61 88);
+  --md-sys-color-on-tertiary-container: rgb(255 214 249);
+  --md-sys-color-error: rgb(255 180 171);
+  --md-sys-color-on-error: rgb(105 0 5);
+  --md-sys-color-error-container: rgb(147 0 10);
+  --md-sys-color-on-error-container: rgb(255 218 214);
+  --md-sys-color-background: rgb(18 19 24);
+  --md-sys-color-on-background: rgb(227 226 233);
+  --md-sys-color-surface: rgb(18 19 24);
+  --md-sys-color-on-surface: rgb(227 226 233);
+  --md-sys-color-surface-variant: rgb(69 70 79);
+  --md-sys-color-on-surface-variant: rgb(197 198 208);
+  --md-sys-color-outline: rgb(143 144 154);
+  --md-sys-color-outline-variant: rgb(69 70 79);
+  --md-sys-color-shadow: rgb(0 0 0);
+  --md-sys-color-scrim: rgb(0 0 0);
+  --md-sys-color-inverse-surface: rgb(227 226 233);
+  --md-sys-color-inverse-on-surface: rgb(47 48 54);
+  --md-sys-color-inverse-primary: rgb(73 93 146);
+  --md-sys-color-primary-fixed: rgb(218 225 255);
+  --md-sys-color-on-primary-fixed: rgb(0 24 73);
+  --md-sys-color-primary-fixed-dim: rgb(179 197 255);
+  --md-sys-color-on-primary-fixed-variant: rgb(49 69 120);
+  --md-sys-color-secondary-fixed: rgb(221 226 249);
+  --md-sys-color-on-secondary-fixed: rgb(21 27 44);
+  --md-sys-color-secondary-fixed-dim: rgb(193 198 221);
+  --md-sys-color-on-secondary-fixed-variant: rgb(65 70 89);
+  --md-sys-color-tertiary-fixed: rgb(255 214 249);
+  --md-sys-color-on-tertiary-fixed: rgb(43 18 43);
+  --md-sys-color-tertiary-fixed-dim: rgb(225 187 220);
+  --md-sys-color-on-tertiary-fixed-variant: rgb(90 61 88);
+  --md-sys-color-surface-dim: rgb(18 19 24);
+  --md-sys-color-surface-bright: rgb(56 57 63);
+  --md-sys-color-surface-container-lowest: rgb(13 14 19);
+  --md-sys-color-surface-container-low: rgb(26 27 33);
+  --md-sys-color-surface-container: rgb(30 31 37);
+  --md-sys-color-surface-container-high: rgb(41 42 47);
+  --md-sys-color-surface-container-highest: rgb(51 52 58);
+}
+
 :host {
   display: block;
 }
 
-.tooltip-content {
+.tooltip-container {
-  background-color: #1e1e1e;
+  box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  color: white;
+  background-color: var(--md-sys-color-inverse-surface);
-  padding: 8px 12px;
+  color: var(--md-sys-color-inverse-on-surface);
+  padding: 4px 8px;
   border-radius: 4px;
-  font-size: 13px;
   max-width: 250px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
   pointer-events: none;
-  animation: tooltip-fade 0.2s cubic-bezier(0, 0, 0.2, 1);
+  overflow: hidden;
+  animation: tooltip-fade 0.5s cubic-bezier(0, 0, 0.2, 1);
 }
 
 @keyframes tooltip-fade {

projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["qd-plain-tooltip.scss"],"names":[],"mappings":"AAAA;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;EACE;IAAO;IAAY;;EACnB;IAAK;IAAY","file":"qd-plain-tooltip.css"}
+{"version":3,"sourceRoot":"","sources":["../../styles/qd_design_system.scss","../../styles/typography/typography.token.scss","../../styles/typography/typography.module.scss","../../styles/design/look_and_feel.scss","../../styles/colors/light-theme.scss","../../styles/colors/dark-theme.scss","qd-plain-tooltip.scss","../../styles/design/overall-design.scss"],"names":[],"mappings":"AAQQ;ACRR;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;AACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AClIF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AHjDF;EITE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EJpCA;;;AAGF;EACE;IKhBA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;;AL3BF;EKrBE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AC/CF;EACE;;;AAGF;ECEE;EDAA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;;AAGF;EACE;IAAO;IAAY;;EACnB;IAAK;IAAY","file":"qd-plain-tooltip.css"}

projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.html

@@ -1,3 +1,3 @@
-<div class="tooltip-container">
+<div class="tooltip-container body-small">
   {{ text() }}
 </div>

projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.scss

@@ -1,17 +1,20 @@
+@use '../../styles/qd_design_system' as qd;
+
 :host {
   display: block;
 }
-.tooltip-content {
-  background-color: #1e1e1e;
-  color: white;
-  padding: 8px 12px;
-  border-radius: 4px;
-  font-size: 13px;
-  max-width: 250px;
-  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
-  pointer-events: none;
 
-  animation: tooltip-fade 0.2s cubic-bezier(0, 0, 0.2, 1);
+.tooltip-container {
+  @include qd.elevation-1;
+  background-color: var(--md-sys-color-inverse-surface);
+  color: var(--md-sys-color-inverse-on-surface);
+  padding: 4px 8px;
+  border-radius: 4px;
+  max-width: 250px;
+  pointer-events: none;
+  overflow: hidden;
+
+  animation: tooltip-fade 0.5s cubic-bezier(0, 0, 0.2, 1);
 }
 
 @keyframes tooltip-fade {

projects/qd-design/src/lib/qd-tooltip-directive.spec.ts

@@ -0,0 +1,8 @@
+import { QdTooltipDirective } from '../directives/qd-tooltip-directive';
+
+describe('QdTooltipDirective', () => {
+  it('should create an instance', () => {
+    const directive = new QdTooltipDirective();
+    expect(directive).toBeTruthy();
+  });
+});