Position a popover so it stays inside the viewport. Tags the host with
em-popover-host (the class SCSS uses to bind the position CSS variables)
and writes the resolved coordinates as CSS custom properties — never
assigns to .style.left / .style.top directly, so the Obsidian plugin
review bot (which flags inline style assignments for positioning) stays
happy.
The position is computed from the mouse cursor only (mouseX/mouseY),
recorded when the popover was triggered by hover.
Note on specificity: Obsidian's HoverPopover sets inline style.left /
style.top on the host to place it. Those inline styles win over plain
class rules by CSS specificity, so the matching SCSS rule needs
!important for our CSS-var placement to actually take effect.
The matching SCSS is expected to bind those variables on the host, e.g.:
.em-popover-host {
position: absolute !important;
left: var(--em-popover-left, 0) !important;
top: var(--em-popover-top, 0) !important;
width: max-content !important;
height: max-content !important;
}
No-op when hoverEl is missing or not yet laid out.
Position a popover so it stays inside the viewport. Tags the host with
em-popover-host(the class SCSS uses to bind the position CSS variables) and writes the resolved coordinates as CSS custom properties — never assigns to .style.left / .style.top directly, so the Obsidian plugin review bot (which flags inline style assignments for positioning) stays happy.The position is computed from the mouse cursor only (mouseX/mouseY), recorded when the popover was triggered by hover.
Note on specificity: Obsidian's HoverPopover sets inline
style.left/style.topon the host to place it. Those inline styles win over plain class rules by CSS specificity, so the matching SCSS rule needs!importantfor our CSS-var placement to actually take effect.The matching SCSS is expected to bind those variables on the host, e.g.: .em-popover-host { position: absolute !important; left: var(--em-popover-left, 0) !important; top: var(--em-popover-top, 0) !important; width: max-content !important; height: max-content !important; }
No-op when
hoverElis missing or not yet laid out.