Tectonic Stacked Tooltip Button

This Tectonic Stacked Tooltip creates a sophisticated, industrial-grade micro-interaction. Instead of a simple fade-in, the tooltip constructs itself from multiple sliding “plates” (slabs) that expand outward upon hovering. With its dark aesthetic, noise textures, and precise easing, it fits perfectly into sci-fi games, technical dashboards, or brutalist web designs.

Core Technique

The effect relies on absolute positioning and the specific manipulation of transform: translate() values on nested layers.

1. The Stack: The tooltip consists of three layers (bottom, mid, top) stacked on top of each other using z-index.
2. Idle State: By default, the layers are slightly offset (4px, 8px) to create a compact, stacked look.
3. Hover Expansion: When the parent button (.tectonic-trigger) is hovered, the CSS targets the child layers. The translate values are increased (e.g., from 8px to 12px), causing the plates to slide apart physically.
4. Cubic Bezier: The transition uses cubic-bezier(0.19, 1, 0.22, 1). This is an “ease-out-expo” style curve, meaning the animation starts fast and snaps into place with a mechanical precision, reinforcing the “heavy” physical feel of the plates.

Customization

You can tweak the expansion distance and the visual style of the layers.

/* Adjust the spread distance on hover */
.tectonic-trigger:hover .layer-bottom {
  /* Increase numbers for wider spread */
  transform: translate(15px, 15px); 
}

.tectonic-trigger:hover .layer-mid {
  transform: translate(8px, 8px);
}

/* Change the accent color line */
.layer-top::after {
  background: linear-gradient(
    90deg,
    transparent,
    #00ff88, /* Green accent */
    transparent
  );
}

Tips

1. SVG Noise for Texture: The .layer-top::before uses a Data URI SVG with a feTurbulence filter to create a grainy noise texture. This adds significant realism without loading an external image. If you change the background color, you might need to adjust the opacity of this noise layer (currently 0.03) to maintain visibility.

2. Accessibility: Currently, the tooltip content is inside the button but hidden with opacity. Screen readers might announce it immediately. To make it accessible:

• Add aria-describedby="tooltip-id" to the button.
• Add id="tooltip-id" and role="tooltip" to the .slab-tooltip container.
• Ensure the contrast of the grey text on the dark background meets WCAG standards (it is quite subtle in this design).