/* GREYD Inline Tooltips (A11y / WCAG orientiert) * * Markup: * * Tooltip is rendered once into with role="tooltip" and referenced via aria-describedby while active. * * Custom Properties (global on :root or scoped): * --greyd-tooltip-bg * --greyd-tooltip-color * --greyd-tooltip-padding * --greyd-tooltip-border * --greyd-tooltip-radius * --greyd-tooltip-font-size * --greyd-tooltip-max-width * --greyd-tooltip-offset (number, px) * --greyd-tooltip-align (start|center|end) Default: start * --greyd-tooltip-placement (top|bottom) * --greyd-tooltip-viewport-padding (number, px) * --greyd-tooltip-shift-x (number, px) * --greyd-tooltip-shift-y (number, px) */ button.greyd-tooltip { /* reset button appearance */ appearance: none; -webkit-appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; letter-spacing: inherit; text-align: inherit; cursor: help; /* 1px dotted underline in current text color */ text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: 1px; text-decoration-color: currentColor; text-underline-offset: 2px; } button.greyd-tooltip:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; } .greyd-tooltip-bubble { background: var(--greyd-tooltip-bg, rgba(0, 0, 0, 0.88)); color: var(--greyd-tooltip-color, #fff); padding: var(--greyd-tooltip-padding, 8px 10px); border: var(--greyd-tooltip-border, 1px solid rgba(0, 0, 0, 0.15)); border-radius: var(--greyd-tooltip-radius, 8px); font-size: var(--greyd-tooltip-font-size, 12px); line-height: 1.35; max-width: var(--greyd-tooltip-max-width, 360px); box-sizing: border-box; white-space: normal; word-break: normal; overflow-wrap: break-word; z-index: 999999; filter: drop-shadow(0 2px 10px rgba(0,0,0,.22)); transition: opacity 120ms ease; } .greyd-tooltip-bubble::after { content: ""; position: absolute; left: var(--greyd-tooltip-arrow-x, 50%); transform: translateX(-50%); width: 0; height: 0; border: 7px solid transparent; } .greyd-tooltip-bubble[data-placement="top"]::after { bottom: -14px; border-top-color: var(--greyd-tooltip-bg, rgba(0, 0, 0, 0.88)); } .greyd-tooltip-bubble[data-placement="bottom"]::after { top: -14px; border-bottom-color: var(--greyd-tooltip-bg, rgba(0, 0, 0, 0.88)); }