CSS Showcase · Live Demo

Tooltips that stay out of the way.

Hover and focus-triggered hints, keyboard accessible with aria-describedby, plus touch-friendly tap bubbles and bottom sheets for smaller screens.

Featured demo

mobile · long-press-sheet

mobile design patterns

tooltip-long-press-sheet.css
/* Info icon opens bottom sheet */
.info-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--foreground) 40%, transparent);
}

.info-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--popover);
  border-top: 1px solid var(--border);
  border-radius: 1rem 1rem 0 0;
  padding: 0.9rem;
  transform: translateY(0);
  transition: transform .2s ease;
}

CSS features used

  • • :hover / :focus-within
  • • ::after CSS arrow triangle
  • • aria-describedby wiring
  • • position: absolute anchoring
  • • color-mix() shadows
  • • Semantic tokens