Tooltip mixins

Tooltip component variables and styles, driven by the data-tooltip attribute.

Generated from the doc blocks in the core source when the site is built, so it always matches the current release of @wovenui/core. Every example is compiled against core during the build; open Compiled CSSunder an example to see its output. Guide: Tooltips. The A to Z index lists every public mixin and function.

Source: components/_tooltips.scss

Mixins

tooltip-variables

tooltip-variables mixin

Emits the tooltip component variables (--wu-tooltip--{Name}); the bubble uses text-regular as background and text-inverted as text, so it contrasts with the page in both themes.

Already emitted on :root (or $parent-selector) when the tooltips feature is enabled; include it again only to reset a scope. The theme blocks re-declare the two color variables, so tooltips inside a data-theme section take that section's colors.

@mixin tooltip-variables

Output

--wu-tooltip--* custom properties for colors, z-index, transition, typography, widths and radius

Example

.help-panel {
  @include tooltip-variables;
  --wu-tooltip--WidthLarge: 320px;
}

Compiled CSS

.help-panel {
  --wu-tooltip--Background: var(--wu-text-regular);
  --wu-tooltip--ShadowColor: rgb(0 0 0 / 20%);
  --wu-tooltip--Color: var(--wu-text-inverted);
  --wu-tooltip--ZIndex: var(--wu-z-tooltip);
  --wu-tooltip--TransitionDuration: var(--wu-duration-200);
  --wu-tooltip--TransitionTimingFunction: var(--wu-ease-in-out);
  --wu-tooltip--TransitionDelay: 0s;
  --wu-tooltip--FontSize: var(--wu-font-size-sm);
  --wu-tooltip--FontWeight: normal;
  --wu-tooltip--TextTransform: none;
  --wu-tooltip--WidthSmall: 80px;
  --wu-tooltip--WidthMedium: 150px;
  --wu-tooltip--WidthLarge: 260px;
  --wu-tooltip--BorderRadius: var(--wu-radius-xs);
  --wu-tooltip--WidthLarge: 320px;
}

Source: components/_tooltips.scss:55