A small package to help position a floating element. This can be positioned relative to another element or to a mouse event.

• Options
• Change log
• License (MIT)

If you want to position an element to another fixed element then you can use the sample below

return position(
    {
        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 = position(
            {
                anchor: mouse,
                target: target,
                my: "top center",
                at: "bottom center",
            }
        );

    target.style.top = pos.top;
    target.style.left = pos.left;
});

The location on the target to position from

The location on the anchor to position against

The element or mouse event to anchor our target to

The target that we're going to be positioning

How to handle collisions with the window edge
Default: bestFit

This is the preferred "best" direction when collision = bestFit and there is a "best fit" horizontally and vertically
Default: horizontal

The fallback values when only one property is supplied, or the property supplied is invalid
Default: { my: "top center", at: "bottom center" }

The Alignment 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

Using a single value will default the other to center so left == center left

• 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