Novice Prime Minister

    position-element

    1.0.2 • Public • Published

    position-element

    A simple function for positioning one DOM element relative to another DOM element (anchor element).

    It is useful for implementing something like tooltips, dropdown/popups with support for these features:

    1. Automatically reposition element with best alternative placement if element renders out of browser view port.
    2. Supports 12 placements options.
    • up-left, up-center, up-right
    • down-left, down-center, down-right
    • left-top, left-middle, left-bottom
    • right-top, right-middle, right-bottom
    1. Customizable distance and offset

    Example

    import positionElement from 'position-element';
    
    const config = {
      element: document.getElementById('subject'),
      anchorElement: document.getElementById('anchor'),
      preferredPlacement: 'down-center',
      distance: 10,
      alignmentOffset: 0,
      autoReposition: true,
    };
    
    positionElement(config);
    
    
    

    Live demo

    demo.html

    Tips

    1. positionElement will do the measurement and set element's position: absolute, left and top style for you.
    2. However, it is important for you to set the right position style (e.g. position:relative ) for the common container of both the anchor element and the positioning element.

    Install

    npm i position-element

    DownloadsWeekly Downloads

    7

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    53.3 kB

    Total Files

    22

    Last publish

    Collaborators

    • dlin-me