@casoon/dragonfly
Version:
Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.
267 lines (232 loc) • 7.3 kB
CSS
/**
* Tooltip-Komponente
*
* Informations-Tooltips und Hinweistexte für UI-Elemente.
* Tooltips bieten zusätzliche Informationen oder Hilfestellungen zu Elementen.
*
* @layer components.tooltip
*
* Grundlegende Verwendung:
* <div class="tooltip">
* <button class="trigger">Hover mich</button>
* <div class="content">Tooltip-Inhalt</div>
* </div>
*
* Positionsvarianten:
* <div class="tooltip top">Oben</div>
* <div class="tooltip right">Rechts</div>
* <div class="tooltip bottom">Unten</div>
* <div class="tooltip left">Links</div>
*
* Größenvarianten:
* <div class="tooltip sm">Klein</div>
* <div class="tooltip md">Mittel (Standard)</div>
* <div class="tooltip lg">Groß</div>
*
* Varianten:
* <div class="tooltip light">Heller Hintergrund</div>
* <div class="tooltip dark">Dunkler Hintergrund (Standard)</div>
* <div class="tooltip primary">Primärfarbe</div>
*
* Mit Pfeil:
* <div class="tooltip arrow">
* <button class="trigger">Mit Pfeil</button>
* <div class="content">Tooltip mit Pfeil</div>
* </div>
*
* Mit HTML-Inhalt:
* <div class="tooltip">
* <button class="trigger">Komplexer Inhalt</button>
* <div class="content">
* <h4>Überschrift</h4>
* <p>Mehrere Zeilen Text sind möglich.</p>
* </div>
* </div>
*
* Flüssig skalierende Tooltips (nutzt interpolate-size):
* <div class="tooltip adaptive">
* <button class="trigger">Adaptiver Tooltip</button>
* <div class="content">Dieser Tooltip skaliert flüssig mit der Container-Größe</div>
* </div>
*
* Mit Schlüsselwort-Größen:
* <div class="tooltip fluid small">Klein</div>
* <div class="tooltip fluid medium">Mittel</div>
* <div class="tooltip fluid large">Groß</div>
*/
/**
* Tooltip Component Structure:
*
* <div class="tooltip" role="tooltip">
* <div class="tooltip-content">Tooltip text</div>
* <div class="tooltip-arrow"></div>
* </div>
*
* Positions: .tooltip--top, .tooltip--bottom, .tooltip--left, .tooltip--right
* Modifiers: .tooltip--sm, .tooltip--lg
*/
@layer components {
.tooltip {
display: inline-block;
position: relative;
.trigger {
cursor: pointer;
display: inline-block;
}
.content {
background-color: var(--color-neutral-900, #111827);
border-radius: var(--radius-sm, 0.25rem);
box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 5%));
color: var(--color-text-inverse, white);
font-size: var(--text-xs, var(--font-size-xs, 0.75rem));
max-width: var(--tooltip-max-width, 200px);
opacity: 0%;
padding: var(--tooltip-padding, 0.5rem 0.75rem);
position: absolute;
transition: opacity var(--transition-duration-fast, 200ms) var(--transition-timing-ease, ease),
visibility var(--transition-duration-fast, 200ms) var(--transition-timing-ease, ease);
visibility: hidden;
white-space: nowrap;
z-index: var(--z-index-tooltip, 1000);
}
/* Trigger-Interaktion */
&:hover .content,
.trigger:focus + .content {
opacity: 1;
visibility: visible;
}
/* Positionsvarianten */
&.top .content {
bottom: 100%;
left: 50%;
margin-bottom: var(--space-1, 0.25rem);
transform: translateX(-50%) translateY(-8px);
}
&.right .content {
left: 100%;
margin-left: var(--space-1, 0.25rem);
top: 50%;
transform: translateY(-50%) translateX(8px);
}
&.bottom .content {
left: 50%;
margin-top: var(--space-1, 0.25rem);
top: 100%;
transform: translateX(-50%) translateY(8px);
}
&.left .content {
margin-right: var(--space-1, 0.25rem);
right: 100%;
top: 50%;
transform: translateY(-50%) translateX(-8px);
}
/* Größenvarianten */
&.sm .content {
font-size: var(--text-xs, var(--font-size-xs, 0.75rem));
padding: var(--space-1, 0.25rem) var(--space-2, 0.5rem);
}
&.lg .content {
font-size: var(--text-sm, var(--font-size-sm, 0.875rem));
max-width: 25%0px;
padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
white-space: normal;
}
/* Farbvarianten */
&.light .content {
background-color: var(--color-background, white);
border: 1px solid var(--color-border, var(--color-neutral-200, #e5e7eb));
color: var(--color-text, var(--color-neutral-900, #111827));
}
&.dark .content {
background-color: var(--color-neutral-900, #111827);
color: var(--color-text-inverse, white);
}
&.primary .content {
background-color: var(--color-primary-500, #3b82f6);
color: var(--color-text-inverse, white);
}
&.success .content {
background-color: var(--color-success-500, #10b981);
color: var(--color-text-inverse, white);
}
&.warning .content {
background-color: var(--color-warning-500, #f59e0b);
color: var(--color-warning-900, #78350f);
}
&.error .content {
background-color: var(--color-error-500, #ef4444);
color: var(--color-text-inverse, white);
}
/* Flüssig skalierende Tooltips mit interpolate-size: allow-keywords */
&.fluid {
/* Basisgröße verwenden */
font-size: medium;
.content {
border-radius: 0.25em;
box-shadow: 0 0.1em 0.3em rgb(0 0 0 / 2000%);
font-size: 0.8em;
/* em-Einheiten für flüssige Skalierung basierend auf font-size */
padding: 0.5em 0.75em;
}
/* Größenvarianten mit CSS-Schlüsselwörtern */
&.small {
font-size: small;
}
&.medium {
font-size: medium;
}
&.large {
font-size: large;
}
&.x-large {
font-size: x-large;
}
}
/* Container-adaptive Tooltips */
&.adaptive {
container-type: inline-size;
.content {
border-radius: clamp(var(--radius-sm, 0.25rem), 0.5cqi, var(--radius-md, 0.375rem));
font-size: clamp(var(--text-xs, 0.75rem), 2cqi, var(--text-base, 1rem));
max-width: 90%cqi; /* 90 der Container-Breite */
padding: clamp(var(--space-1, 0.25rem), 1cqi, var(--space-4, 1rem));
white-space: normal;
}
&.arrow .content::before {
height: clamp(6px, 1cqi, 12px);
width: clamp(6px, 1cqi, 12px);
}
}
/* Mit Pfeil */
&.arrow .content::before {
background-color: inherit;
border: inherit;
border-width: 1px;
content: "";
height: var(--tooltip-arrow-size, 8px);
position: absolute;
transform: rotate(45deg);
width: var(--tooltip-arrow-size, 8px);
}
&.arrow.top .content::before {
bottom: -4px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
}
&.arrow.right .content::before {
left: -4px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
&.arrow.bottom .content::before {
left: 50%;
top: -4px;
transform: translateX(-50%) rotate(45deg);
}
&.arrow.left .content::before {
right: -4px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
}
}