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);
+}