| 1 |
// Tooltip on a greyed-out "New Fields" inserter entry |
| 2 |
// (components/UniqueFieldTooltip.js). Core dims the entry of a field type that |
| 3 |
// may only appear once per form and says nothing about why, so we anchor our |
| 4 |
// own explanation to it. |
| 5 |
// |
| 6 |
// Styled as a dark chip like core's own Tooltip rather than the light sheet a |
| 7 |
// bare Popover renders — that's the affordance users read as "hint" instead of |
| 8 |
// "menu." |
| 9 |
// |
| 10 |
// No `.wppb-fb-block-editor` scope needed (unlike the bare-Gutenberg-selector |
| 11 |
// partials): the class is ours and only reaches the DOM from a component that |
| 12 |
// already gates on the PB form CPTs. |
| 13 |
// `.components-popover` is doubled up (not decoration): core sizes the popover |
| 14 |
// through those same classes, and a lone `.wppb-fb-unique-tip` only ties on |
| 15 |
// specificity — which core's stylesheet then wins on source order. |
| 16 |
.components-popover.wppb-fb-unique-tip { |
| 17 |
// Load-bearing, not polish. The tooltip renders directly beneath the entry, |
| 18 |
// so a pointer over it would resolve to "not an inserter entry", close the |
| 19 |
// tooltip, land back on the entry, reopen it — flickering for as long as the |
| 20 |
// pointer sat there. |
| 21 |
pointer-events: none; |
| 22 |
|
| 23 |
.components-popover__content { |
| 24 |
// Core shrink-wraps the content box to min-content, which for a sentence |
| 25 |
// means "as wide as the longest word" — the tip renders as a |
| 26 |
// one-word-per-line ribbon. Sizing must land HERE, on the content box, |
| 27 |
// not on the popover root: the root is itself sized from this child, so |
| 28 |
// a `width` up there only widens an empty frame around a 56px chip. |
| 29 |
max-width: 220px; |
| 30 |
width: max-content; |
| 31 |
|
| 32 |
background: var(--wppb-fb-surface-inverse); |
| 33 |
border: none; |
| 34 |
border-radius: var(--wppb-fb-radius-sm); |
| 35 |
box-shadow: none; |
| 36 |
color: var(--wppb-fb-text-on-accent); |
| 37 |
font-size: var(--wppb-fb-font-sm); |
| 38 |
line-height: 1.4; |
| 39 |
padding: var(--wppb-fb-space-xs) var(--wppb-fb-space-sm); |
| 40 |
} |
| 41 |
} |
| 42 |
|
