Use @topmarksdevelopment/position instead
A small package to help position a floating element. This can be positioned relative to another element or to a mouse event.
If you want to position an element to another fixed element then you can use the sample below
return new HoverPosition(
{
anchor: document.getElementById("Anchor"),
target: document.getElementById("Target"),
my: "top center",
at: "bottom center",
}
);If you'd rather position the element to the mouse's movement then you can use the sample below
⚠ It is recommended to debounce the below sample, just to prevent performance issues
document.addEventListener("mousemove", function(mouse){
const target = document.getElementById("Target"),
pos = new HoverPosition(
{
anchor: mouse,
target: target,
my: "top center",
at: "bottom center",
}
);
target.style.top = pos.top;
target.style.left = pos.left;
});| Option | Type | Default | Details |
|---|---|---|---|
my |
PositionAlignment |
N/A | The location on the target to position from |
at |
PositionAlignment |
N/A | The location on the anchor to position against |
anchor |
HTMLElement OR MouseEvent |
N/A | The element or mouse event to anchor our target to |
target |
HTMLElement |
N/A | The target that we're going to be positioning |
collision? |
PositionCollision |
bestFit |
How to handle collisions with the window edge |
bestFitPreference? |
horizontal OR vertical |
horizontal |
This is the preferred "best" direction when collision = bestFit and there is a "best fit" horizontally and vertically |
defaults? |
{ my: PositionAlignment; at: PositionAlignment } |
my: "top center", at: "bottom center" |
The fallback when only one property is supplied or the property supplied is invalid |
The PositionAlignment will allow any of the below, plus a combination in the form vertical horizontal (e.g. top center, bottom right or center left)
- "top"
- "bottom"
- "center"
- "left"
- "right"
bestFit- This will find the closest fit before trying to flip the element
flipFit- This will flip the element completely vertically and horizontally
ignore- This will just ignore any collisions and place the element exactly where you wanted it