@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
40 lines (35 loc) • 1.14 kB
CSS
.trigger {
display: inline-flex;
max-width: max-content;
}
/* Positioner uses CSS transform for floating-ui placement, which creates
a new stacking context. An explicit z-index ensures the tooltip paints
above page elements that carry their own z-index (e.g. sticky headers,
footers with z-index: 10). */
.positioner {
z-index: 50;
}
.popup {
position: relative;
overflow: hidden;
border-radius: var(--ac-radius-sm);
background-color: var(--ac-foreground);
color: var(--ac-background);
padding: var(--ac-space-1) var(--ac-space-2);
font-size: var(--ac-text-xs);
line-height: 1.5;
box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
transform-origin: var(--transform-origin);
transition: opacity var(--ac-transition-fast), transform var(--ac-transition-fast);
/* Force all descendants (e.g. <code>, <strong>) to inherit the
tooltip's inverted color scheme so consumer styles don't bleed in. */
& * {
color: inherit;
background-color: transparent;
}
&[data-starting-style],
&[data-ending-style] {
opacity: 0;
transform: scale(0.96);
}
}