styles

src/app/shared/components/ui/button/button.component.css

@@ -1,20 +1,21 @@
 /* Stile, die NUR für diese Button-Komponente gelten */
 :host {
-  display: inline-block; /* Sorgt für korrektes Layout-Verhalten */
+  display: inline-block;
+  position: relative;
 }
 
 /* Basis-Stil für alle Buttons */
 .btn {
   position: relative; /* Wichtig für den Ripple-Effekt */
-  overflow: hidden;   /* Verhindert, dass der Ripple über den Button hinausgeht */
-  
+  overflow: hidden; /* Verhindert, dass der Ripple über den Button hinausgeht */
+
   border: none;
   border-radius: var(--border-radius-md);
   cursor: pointer;
   font-weight: 600;
   padding: 0.6rem 1.2rem;
   transition: all 0.2s ease-out;
-  
+
   /* Stellt sicher, dass der Inhalt (Text/Icon) zentriert ist */
   display: inline-flex;
   align-items: center;
@@ -95,7 +96,10 @@
   animation: ripple-effect 0.6s linear;
   background-color: rgba(255, 255, 255, 0.7);
 }
-.btn-secondary .ripple, .btn-stroked .ripple, .btn-flat .ripple, .btn-icon .ripple {
+.btn-secondary .ripple,
+.btn-stroked .ripple,
+.btn-flat .ripple,
+.btn-icon .ripple {
   background-color: rgba(0, 0, 0, 0.1);
 }
 
@@ -104,4 +108,29 @@
     transform: scale(4);
     opacity: 0;
   }
-}
+}
+
+[data-tooltip] {
+  position: relative;
+}
+[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-8px);
+  background-color: #2c3e50;
+  color: #fff;
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--border-radius-sm);
+  font-size: 0.85rem;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity var(--transition-speed), transform var(--transition-speed);
+}
+[data-tooltip]:hover::after {
+  opacity: 1;
+  visibility: visible;
+  transform: translateX(-50%) translateY(-12px);
+}

src/app/shared/components/ui/button/button.component.html

@@ -2,15 +2,14 @@
   [type]="submitType"
   [disabled]="disabled"
   class="btn"
-  [class.btn-primary]="buttonType === 'primary'" 
-  [class.btn-secondary]="buttonType === 'secondary'" 
-  [class.btn-stroked]="buttonType === 'stroked'" 
-  [class.btn-flat]="buttonType === 'flat'" 
-  [class.btn-icon]="buttonType === 'icon' || buttonType === 'icon-danger'" 
-  [class.btn-icon-danger]="buttonType === 'icon-danger'" 
+  [class.btn-primary]="buttonType === 'primary'"
+  [class.btn-secondary]="buttonType === 'secondary'"
+  [class.btn-stroked]="buttonType === 'stroked'"
+  [class.btn-flat]="buttonType === 'flat'"
+  [class.btn-icon]="buttonType === 'icon' || buttonType === 'icon-danger'"
+  [class.btn-icon-danger]="buttonType === 'icon-danger'"
   [class.btn-full-width]="fullWidth"
-  [attr.data-tooltip]="tooltip">
-  
+>
   <app-icon *ngIf="iconName" [name]="iconName" [svgColor]="svgColor"></app-icon>
   <ng-content></ng-content>
-</button>
+</button>

src/app/shared/components/ui/button/button.component.ts

@@ -1,8 +1,9 @@
-import { Component, Input, ElementRef, Renderer2, HostListener } from '@angular/core';
+// Importieren Sie HostBinding
+import { Component, Input, ElementRef, Renderer2, HostListener, HostBinding } from '@angular/core'; 
 import { CommonModule } from '@angular/common';
 import { IconComponent } from '../icon/icon.component';
 
-type ButtonColor = 'primary' | 'secondary' | 'stroked' | 'flat' | 'icon' | 'icon-danger';
+type ButtonType = 'primary' | 'secondary' | 'stroked' | 'flat' | 'icon' | 'icon-danger';
 
 @Component({
   selector: 'app-button',
@@ -12,17 +13,25 @@ type ButtonColor = 'primary' | 'secondary' | 'stroked' | 'flat' | 'icon' | 'icon
   styleUrl: './button.component.css'
 })
 export class ButtonComponent {
-  @Input() buttonType: ButtonColor = 'primary';
+  @Input() buttonType: ButtonType = 'primary';
   @Input() submitType: 'button' | 'submit' = 'button';
   @Input() disabled = false;
   @Input() fullWidth = false;
-  @Input() tooltip: string | null = null;
   @Input() iconName: string | null = null; 
   @Input() svgColor: string | null = null;
+  
+  // Der Tooltip-Input
+  @Input() tooltip: string | null = null;
+
+  // HIER IST DIE HINZUGEFÜGTE LOGIK:
+  // HostBinding verknüpft die `tooltip`-Eigenschaft mit dem `data-tooltip`-Attribut
+  // des <app-button>-Host-Elements.
+  @HostBinding('attr.data-tooltip') get tooltipAttr() {
+    return this.tooltip;
+  }
 
   constructor(private el: ElementRef, private renderer: Renderer2) {}
 
-  // HostListener fängt Klick-Events direkt auf dem Host-Element (<app-button>) ab
   @HostListener('click', ['$event'])
   onClick(event: MouseEvent) {
     if (this.disabled) {
@@ -32,23 +41,19 @@ export class ButtonComponent {
     const button = this.el.nativeElement.querySelector('.btn');
     if (!button) return;
 
-    // Entferne alte Ripple-Effekte
+    // --- Ihre Ripple-Logik bleibt hier unverändert ---
     const existingRipple = button.querySelector('.ripple');
     if (existingRipple) {
       existingRipple.remove();
     }
-
-    // Erzeuge den Ripple-Effekt
     const circle = this.renderer.createElement('span');
     const diameter = Math.max(button.clientWidth, button.clientHeight);
     const radius = diameter / 2;
-
     this.renderer.setStyle(circle, 'width', `${diameter}px`);
     this.renderer.setStyle(circle, 'height', `${diameter}px`);
     this.renderer.setStyle(circle, 'left', `${event.clientX - button.offsetLeft - radius}px`);
     this.renderer.setStyle(circle, 'top', `${event.clientY - button.offsetTop - radius}px`);
     this.renderer.addClass(circle, 'ripple');
-
     this.renderer.appendChild(button, circle);
   }
 }