⚠ This package is depreacted

Use @topmarksdevelopment/position instead

Hover Position (A JavaScript package)

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

Links

• Options
• Change log
• License (MIT)

Usage

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;
});

Options

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 property

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"

The PositionCollision property

• 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