Monsoon v0.2.0
Made by Alexandre Kohler Star

Actions and feedback

Tooltip

A CSS only tooltip read from the data-tip attribute, shown on hover and keyboard focus, in four positions and eight tones.

Actions and feedback14 classesNo JavaScriptLight and dark

Example

Full

Classes

14 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 tooltip. On a <span> in the example. Sets inline-block display, absolute position, stacking order, offsets, opacity and transform, and 4 custom properties.
CSS
.tooltip:not([data-tip])::after, .tooltip:not([data-tip])::before {
  display: none;
}

.tooltip::before {
  content: "";
  bottom: calc(100% - 2px);
  border: 5px solid transparent;
  border-top-color: var(--tone);
}
Modifier Modifier, combined with the tooltip class. Not used in the example above. Sets offsets.
CSS
.tooltip-top::after {
  top: auto;
  bottom: calc(100% + 8px);
}
Modifier Modifier, combined with the tooltip class. On a <span> in the example. Sets offsets and border, and --tip-hidden.
CSS
.tooltip-bottom {
  --tip-hidden: -50% -0.25rem;
}

.tooltip-bottom::after {
  top: calc(100% + 8px);
  bottom: auto;
}
Modifier Modifier, combined with the tooltip class. On a <span> in the example. Sets offsets and border, and --tip-shown and --tip-hidden.
CSS
.tooltip-left {
  --tip-hidden: 0.25rem -50%;
}

.tooltip-left, .tooltip-right {
  --tip-shown: 0 -50%;
}
Modifier Modifier, combined with the tooltip class. On a <span> in the example. Sets offsets and border, and --tip-shown and --tip-hidden.
CSS
.tooltip-right {
  --tip-hidden: -0.25rem -50%;
}

.tooltip-right::after {
  left: calc(100% + 8px);
}
Modifier Modifier, combined with the tooltip class. On a <span> in the example. Sets opacity, transform and transition.
CSS
.tooltip:hover::after, .tooltip:hover::before, .tooltip:has(:focus-visible)::after, .tooltip:has(:focus-visible)::before, .tooltip:focus-visible::after, .tooltip:focus-visible::before, .tooltip-open::after, .tooltip-open::before {
  opacity: 1;
  translate: var(--tip-shown);
  transition-delay: 0.1s;
}
Tone Primary tone. On a <span> in the example. Sets --tone and --tone-fg.
CSS
.btn-primary,
.alert-primary,
.callout-primary,
.banner-primary,
.badge-primary,
.chip-primary,
.tag-primary,
.spinner-primary,
.progress-primary,
.radial-progress-primary,
.tooltip-primary,
.status-primary {
  --tone: var(--primary);
  --tone-fg: var(--primary-foreground);
}
Tone Secondary tone. Not used in the example above. Sets --tone, --tone-fg and --tone-tint.
CSS
.btn-secondary,
.alert-secondary,
.callout-secondary,
.banner-secondary,
.badge-secondary,
.chip-secondary,
.tag-secondary,
.tooltip-secondary {
  --tone: var(--secondary);
  --tone-fg: var(--secondary-foreground);
  --tone-tint: var(--secondary-foreground);
}
Tone Accent tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.btn-accent,
.alert-accent,
.callout-accent,
.banner-accent,
.badge-accent,
.chip-accent,
.tag-accent,
.spinner-accent,
.progress-accent,
.radial-progress-accent,
.tooltip-accent,
.status-accent {
  --tone: var(--accent);
  --tone-fg: var(--accent-foreground);
}
Tone Neutral tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.btn-neutral,
.alert-neutral,
.callout-neutral,
.banner-neutral,
.badge-neutral,
.chip-neutral,
.tag-neutral,
.spinner-neutral,
.progress-neutral,
.radial-progress-neutral,
.tooltip-neutral,
.status-neutral {
  --tone: var(--foreground);
  --tone-fg: var(--background);
}
Tone Success tone. On a <span> in the example. Sets --tone and --tone-fg.
CSS
.btn-success,
.alert-success,
.callout-success,
.banner-success,
.badge-success,
.chip-success,
.tag-success,
.spinner-success,
.progress-success,
.radial-progress-success,
.tooltip-success,
.status-success {
  --tone: var(--success);
  --tone-fg: var(--success-foreground);
}
Tone Warning tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.btn-warning,
.alert-warning,
.callout-warning,
.banner-warning,
.badge-warning,
.chip-warning,
.tag-warning,
.spinner-warning,
.progress-warning,
.radial-progress-warning,
.tooltip-warning,
.status-warning {
  --tone: var(--warning);
  --tone-fg: var(--warning-foreground);
}
Tone Danger tone. On a <span> in the example. Sets --tone and --tone-fg.
CSS
.btn-danger,
.alert-danger,
.callout-danger,
.banner-danger,
.badge-danger,
.chip-danger,
.tag-danger,
.spinner-danger,
.progress-danger,
.radial-progress-danger,
.tooltip-danger,
.status-danger {
  --tone: var(--danger);
  --tone-fg: var(--danger-foreground);
}
Tone Info tone. Not used in the example above. Sets --tone and --tone-fg.
CSS
.btn-info,
.alert-info,
.callout-info,
.banner-info,
.badge-info,
.chip-info,
.tag-info,
.spinner-info,
.progress-info,
.radial-progress-info,
.tooltip-info,
.status-info {
  --tone: var(--info);
  --tone-fg: var(--info-foreground);
}

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">

<!-- Tooltip: start from the base class, then add modifiers -->
<div class="flex flex-wrap items-center gap-4 py-10 px-4">
  <span class="tooltip tooltip-open" data-tip="Copy to clipboard"><button class="btn btn-outline btn-neutral">Top</button></span>
  <span class="tooltip tooltip-bottom tooltip-open tooltip-primary" data-tip="Opens in a new tab"><button class="btn btn-outline btn-neutral">Bottom</button></span>
  <span class="tooltip tooltip-right tooltip-success" data-tip="All checks passed"><button class="btn btn-outline btn-neutral">Right</button></span>
  <span class="tooltip tooltip-left tooltip-danger" data-tip="This cannot be undone"><button class="btn btn-outline btn-neutral">Left</button></span>
</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

  • Use button for actions and a for navigation. Icon only buttons need an aria-label; decorative icons carry aria-hidden="true".
  • Tooltips appear on hover and on keyboard focus. Keep essential information out of tooltips, since touch users may never see them.
  • 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.
Actions and feedbackMeterA styled native meter that turns green, amber or red from its low, high and optimum values.Actions and feedbackSkeletonShimmering placeholders for content that is still loading: blocks, text lines and circles.Actions and feedbackIndicatorPlaces a badge or status dot on any corner or edge of another element.Actions and feedbackStatusA small status dot for presence and health, with an optional ping animation.

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.