Skip to content
This repository has been archived by the owner on Dec 12, 2022. It is now read-only.

A compact tool to help position an element against another. Similar to JQuery `.position()`

License

Notifications You must be signed in to change notification settings

TopMarksDevelopment/JavaScript.HoverPosition

Repository files navigation

⚠ 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

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

About

A compact tool to help position an element against another. Similar to JQuery `.position()`

Resources

License

Stars

Watchers

Forks

Packages

No packages published