quentin_duwa/qd-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement tooltip

Browse Source
This commit is contained in:
MastersGame
2026-01-31 20:31:35 +01:00
parent dc5e532769
commit b631df89ea
8 changed files with 553 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
projects/qd-design-demo/src/app/app.html
View File

@@ -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>

3
projects/qd-design-demo/src/app/app.ts
View File

@@ -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'
})

58
projects/qd-design/src/directives/qd-tooltip-directive.ts
View File

@@ -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();
}
}
}

476
projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.css
View File

@@ -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 {
background-color: #1e1e1e;
color: white;
padding: 8px 12px;
.tooltip-container {
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
background-color: var(--md-sys-color-inverse-surface);
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 {

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

@@ -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"}

2
projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.html
View File

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

23
projects/qd-design/src/lib/qd-plain-tooltip/qd-plain-tooltip.scss
View File

@@ -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 {

8
projects/qd-design/src/lib/qd-tooltip-directive.spec.ts Normal file
View File

@@ -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();
});
});