Monsoon v0.2.0
Made by Alexandre Kohler Star

Navigation and overlays

Popover

A floating card on the native popover attribute: light dismiss, Escape and focus return for free. Anchored to its button where anchor positioning is supported, centered otherwise.

Navigation and overlays6 classesNo JavaScriptLight and dark

Example

Full

Classes

6 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

ClassTypeWhat it does
Base Base class of the popover. On a <div> in the example. Sets width, padding, text size, text style, background and text color.
CSS
.popover:popover-open, .dropdown-content:popover-open {
  opacity: 1;
  transform: none;
}

[popover]:not(:popover-open):where(.menu, .dropdown-content, .context-menu, .popover) {
  display: none;
}
Part Part of the popover. On a <strong> in the example. Sets block display, margin and font weight.
CSS
.popover-title {
  display: block;
  margin-bottom: .25rem;
  font-weight: 600;
}
Modifier Modifier, combined with the popover class. Not used in the example above. Sets 4 custom properties.
CSS
.popover-top, .dropdown-top {
  --popover-area: block-start span-inline-end;
  --popover-margin: 0 0 .5rem;
  --dropdown-pos: auto auto 100% 0;
  --dropdown-margin: 0 0 .5rem;
}
Modifier Modifier, combined with the popover class. Not used in the example above. Sets 4 custom properties.
CSS
.popover-left, .dropdown-left {
  --popover-area: inline-start span-block-end;
  --popover-margin: 0 .5rem 0 0;
  --dropdown-pos: 0 100% auto auto;
  --dropdown-margin: 0 .5rem 0 0;
}
Modifier Modifier, combined with the popover class. Not used in the example above. Sets 4 custom properties.
CSS
.popover-right, .dropdown-right {
  --popover-area: inline-end span-block-end;
  --popover-margin: 0 0 0 .5rem;
  --dropdown-pos: 0 auto auto 100%;
  --dropdown-margin: 0 0 0 .5rem;
}
Modifier Modifier, combined with the popover class. Not used in the example above. Sets --popover-area and --dropdown-pos.
CSS
.popover-end, .dropdown-end {
  --popover-area: block-end span-inline-start;
  --dropdown-pos: 100% 0 auto auto;
}

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Popover: start from the base class, then add modifiers -->
<button type="button" popovertarget="plan-info" class="inline-flex items-center justify-center gap-2 rounded-lg border border-border bg-surface px-4 py-2 text-sm font-medium hover:bg-muted">What is included?</button><div id="plan-info" popover class="popover"><strong class="popover-title">Pro plan</strong><p class="text-muted-foreground">Unlimited projects, preview deployments and 30 days of analytics history.</p></div>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

Accessibility

  • Uses the popover attribute: the browser handles light dismiss, Escape and top layer stacking, and popovertarget wires the trigger without JavaScript.
  • Use button for actions and a for navigation. Icon only buttons need an aria-label; decorative icons carry aria-hidden="true".
  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
Navigation and overlaysModalA centered dialog over a blurred backdrop. Open it with command="show-modal" (or link to its id for a :target fallback), close it with command="close", a form with method="dialog" or Escape. Five widths, a top aligned variant and a bottom sheet on phones.Navigation and overlaysSheetA bottom sheet dialog with a grab handle that slides up from the bottom edge, for share menus and quick actions on touch screens.Navigation and overlaysDropdownA menu that opens below a trigger, built on <details> or on a popover for light dismiss. Opens on focus or hover for plain wrappers, with end, top, left and right placements.Navigation and overlaysMenuA list of links or actions with titles, icons, shortcuts, an active item, disabled and danger states, nested submenus on <details> and a horizontal layout.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.