Tooltip

Source

• Tooltip.css

Example

<div class="x-tooltip bottom" aria-label="I am tooltip">
    <button class="x-button">Tooltip</button>
</div>

More examples can be found in the Winduum docs.

Example CSS

@import "winduum/src/components/tooltip/props/default.css" layer(theme);
@import "winduum/src/components/tooltip/default.css" layer(utilities);

/* Example customization */
@layer theme {
  :root, :host {
    --x-tooltip-background-color: var(--color-accent);
    --x-tooltip-color: var(--color-accent);
  }
}

Winduum CSS Code

winduum/src/components/tooltip/props/default.css

:root, :host {
  --x-tooltip-background-color: var(--color-main);
  --x-tooltip-color: var(--color-main-foreground);
  --x-tooltip-border-radius: var(--radius-md);
  --x-tooltip-font-size: var(--text-sm);
  --x-tooltip-padding-block: calc(var(--spacing) * 1);
  --x-tooltip-padding-inline: calc(var(--spacing) * 2);
  --x-tooltip-margin-block: calc(var(--spacing) * 1);
  --x-tooltip-margin-inline: calc(var(--spacing) * 1);
  --x-tooltip-scale-x: 0.75;
  --x-tooltip-scale-y: 0.75;
}

winduum/src/components/tooltip/default.css

.x-tooltip {
  position: relative;
  display: inline-block;

  &::before {
    --tw-content: attr(aria-label);

    background-color: var(--x-tooltip-background-color);
    color: var(--x-tooltip-color);
    border-radius: var(--x-tooltip-border-radius);
    font-size: var(--x-tooltip-font-size);
    padding: var(--x-tooltip-padding-block) var(--x-tooltip-padding-inline);
    z-index: var(--x-tooltip-z-index, var(--z-index-20));
    transition-property: var(--default-transition-property);
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--default-transition-duration);
    content: var(--tw-content);
    opacity: var(--tw-opacity);
    visibility: var(--tw-visibility);
    transform:
      translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0))
      scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1));
    will-change: transform;
    inline-size: max-content;
    position: absolute;
    pointer-events: none;
  }

  &:where(.top), &:where(.bottom) {
    &::before {
      --tw-translate-x: -50%;

      margin-block: var(--x-tooltip-margin-block);
      inset-inline-start: 50%;
    }
  }

  &:where(.left), &:where(.right) {
    &::before {
      --tw-translate-y: -50%;

      margin-inline: var(--x-tooltip-margin-inline);
      inset-block-start: 50%;
    }
  }

  &:where(.bottom) {
    &::before {
      inset-block-start: 100%;
      transform-origin: top;
    }
  }

  &:where(.top) {
    &::before {
      inset-block-end: 100%;
      transform-origin: bottom;
    }
  }

  &:where(.left) {
    &::before {
      inset-inline-end: 100%;
      transform-origin: right;
    }
  }

  &:where(.right) {
    &::before {
      inset-inline-start: 100%;
      transform-origin: left;
    }
  }

  &:not(:hover, :focus)::before {
    --tw-scale-x: var(--x-tooltip-scale-x);
    --tw-scale-y: var(--x-tooltip-scale-y);
    --tw-opacity: 0;
    --tw-visibility: hidden;
  }
}