tray tooltips: tilt persists while portal is open; PRV|NXT pinned to corners — TDD
- TrayTooltip adds .tt-active to the .tray-role-card / .tray-sig-card cell while its tooltip is open & removes it on _hide. The hover-tilt selectors gain .tt-active alongside :hover, :focus so the card stays tilted while the user is hovering the portal itself rather than the cell. - #id_tooltip_portal: .fyi-prev / .fyi-next pinned to the bottom corners w. 1rem outside the panel (bottom: -1rem; left/right: -1rem) — same anchor the @stat-block-shared mixin uses for fan / sig / sea, restated here since the portal isn't covered by that mixin. - 2 new TrayTooltipSpec specs (.tt-active added on hover, removed on _hide; for both role & sig branches). Code architected by Disco DeDisco <discodedisco@outlook.com> Git commit message Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -138,6 +138,35 @@ describe("TrayTooltip", () => {
|
||||
// Clamping — portal left stays inside the viewport //
|
||||
// ---------------------------------------------------------------------- //
|
||||
|
||||
// ---------------------------------------------------------------------- //
|
||||
// .tt-active on the cell — tilt persistence //
|
||||
// ---------------------------------------------------------------------- //
|
||||
//
|
||||
// The role-card / sig-card hover-tilt is keyed off :hover + :focus on the
|
||||
// cell. While the portal is open the pointer is typically OFF the cell
|
||||
// (hovering the portal itself), so :hover drops; if the cell never
|
||||
// received focus, :focus is also absent and the tilt reverts even though
|
||||
// the tooltip is still active. Solution: TrayTooltip adds .tt-active to
|
||||
// the cell while its tooltip is open and removes it on _hide. SCSS
|
||||
// includes .tt-active in the tilt selector list.
|
||||
|
||||
describe(".tt-active class on the cell", () => {
|
||||
it("is added to the role-card cell on mouseenter and removed on hide", () => {
|
||||
img.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
|
||||
expect(cell.classList.contains("tt-active")).toBe(true);
|
||||
|
||||
// outer beforeEach already stubs img.getBoundingClientRect; just
|
||||
// pin the portal so the union test is deterministic.
|
||||
spyOn(portal, "getBoundingClientRect").and.returnValue({
|
||||
left: 0, right: 10, top: 0, bottom: 10, width: 10, height: 10,
|
||||
});
|
||||
document.dispatchEvent(new MouseEvent("mousemove", {
|
||||
bubbles: true, clientX: 9999, clientY: 9999,
|
||||
}));
|
||||
expect(cell.classList.contains("tt-active")).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
// ---------------------------------------------------------------------- //
|
||||
// Phase 2 — sig-card branch //
|
||||
// ---------------------------------------------------------------------- //
|
||||
@@ -249,6 +278,19 @@ describe("TrayTooltip", () => {
|
||||
expect(portal.classList.contains("active")).toBe(true);
|
||||
});
|
||||
|
||||
it("adds .tt-active to the sig cell on hover and removes it on _hide", () => {
|
||||
sigStage.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
|
||||
expect(sigCell.classList.contains("tt-active")).toBe(true);
|
||||
|
||||
spyOn(portal, "getBoundingClientRect").and.returnValue({
|
||||
left: 0, right: 10, top: 0, bottom: 10, width: 10, height: 10,
|
||||
});
|
||||
document.dispatchEvent(new MouseEvent("mousemove", {
|
||||
bubbles: true, clientX: 9999, clientY: 9999,
|
||||
}));
|
||||
expect(sigCell.classList.contains("tt-active")).toBe(false);
|
||||
});
|
||||
|
||||
it("clears portal when pointer leaves trigger + portal + btn rect union", () => {
|
||||
sigStage.dispatchEvent(new MouseEvent("mouseenter", { bubbles: true }));
|
||||
spyOn(portal, "getBoundingClientRect").and.returnValue({
|
||||
|
||||
Reference in New Issue
Block a user