Edouard Vanbelle
96 lines
3.5 KiB
CSS
96 lines
3.5 KiB
CSS
/* ── Tooltip primitive ─────────────────────────────────────────────
|
||
*
|
||
* Generic on-hover tooltip used app-wide. Two flavours:
|
||
*
|
||
* 1. Single-line label, content from `data-tooltip="…"` on the trigger.
|
||
* Use `attachTooltip(el, text)` from `static/js/utils/tooltip.js`.
|
||
* 2. Rich popover with a DOM subtree, populated lazily on first hover.
|
||
* Use `attachRichTooltip(el, populateAsync)` for things like the
|
||
* group-vignette member list.
|
||
*
|
||
* Both are portal'd to `document.body` (the JS helper creates a child
|
||
* of body and positions it with `position: fixed`) so they escape the
|
||
* `overflow: hidden` clipping that lives on lane wrappers, list rows,
|
||
* and any other "contain my children" ancestor. Without the portal,
|
||
* tooltips near the edges of those containers get cropped — exactly
|
||
* the bug that prompted this refactor.
|
||
*
|
||
* Hover-intent timing is asymmetric on purpose:
|
||
* - Entry: 250 ms delay before the fade-in starts. Short enough to
|
||
* feel responsive (much faster than the browser-native `title`
|
||
* delay, which is ~500–1500 ms), long enough to suppress flicker
|
||
* on accidental mouseovers.
|
||
* - Exit: 0 ms delay. The tooltip dismisses immediately when the
|
||
* user moves away.
|
||
*
|
||
* The class toggle is JS-driven (mouseenter/leave + focusin/out
|
||
* listeners on the trigger); the visible transition lives entirely
|
||
* in CSS so a setTimeout never gates the visual change.
|
||
*/
|
||
|
||
.oxi-tooltip-popover {
|
||
position: fixed;
|
||
min-width: 0;
|
||
max-width: 280px;
|
||
padding: 6px 10px;
|
||
background-color: var(--color-text);
|
||
color: var(--color-bg-page);
|
||
font-size: 12px;
|
||
line-height: 1.5;
|
||
text-align: left;
|
||
border-radius: 6px;
|
||
box-shadow: 0 2px 8px var(--color-shadow);
|
||
pointer-events: none;
|
||
opacity: 0;
|
||
/* Default (no `--visible`): fast hide, no delay. */
|
||
transition: opacity 100ms ease-out 0ms;
|
||
z-index: 10000;
|
||
}
|
||
|
||
/* Simple (data-tooltip) flavour — keeps the label on one line so it
|
||
reads as a short caption, not a paragraph. Used by short labels
|
||
like a user vignette's email-on-hover. */
|
||
.oxi-tooltip-popover--simple {
|
||
white-space: nowrap;
|
||
max-width: none;
|
||
}
|
||
|
||
/* Visible state overrides the transition to add the hover-intent
|
||
delay on the *entry* path. Removing the class falls back to
|
||
the default rule above (no delay → immediate fade-out). */
|
||
.oxi-tooltip-popover--visible {
|
||
opacity: 1;
|
||
transition: opacity 100ms ease-out 250ms;
|
||
}
|
||
|
||
/* ── Rich-popover layout helpers ────────────────────────────────── */
|
||
|
||
.oxi-tooltip-popover__line {
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* "+N" overflow badge — small pill at the end of a list of items when
|
||
there are more than the tooltip cares to show. Lighter background
|
||
so the count reads as meta-information, not just another line. */
|
||
.oxi-tooltip-popover__overflow {
|
||
display: inline-block;
|
||
margin-top: 4px;
|
||
padding: 1px 7px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
color: var(--color-bg-page);
|
||
background-color: var(--color-text-faint);
|
||
border-radius: 9999px;
|
||
}
|
||
|
||
/* Placeholder line shown briefly between the first hover and the
|
||
populate() callback's resolve (e.g. while `/api/groups/{id}/members`
|
||
is in flight). Italic + dimmed so the user perceives it as a
|
||
transitional state, not real content. */
|
||
.oxi-tooltip-popover__placeholder {
|
||
color: var(--color-text-faint);
|
||
font-style: italic;
|
||
}
|