Calculate the position of an element relative to another element or event. Tries to find a collision free position within the viewport of a given container.

Download the production version or the development version or install it via Bower.

or for quick tests, add this tag to load it direct from github:

<script src="http://tlindig.github.io/position-calculator/dist/position-calculator.min.js"></script>

I will deploy it on CDN "cdnJS.com" if this requirement is met:

Libraries must have notable popularity: 100 stars or watchers on GitHub is a good example, but as long as reasonable popularity can be demonstrated the library will be added."

Visit demonstration and documentation page: Position Calculator

Ready to use version of this lib can be found in folder: "dist"

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script src="http://rawgit.com/tlindig/position-calculator/master/dist/position-calculator.min.js"></script>
  <meta charset="utf-8">
  <script>
    jQuery(function($) {

      var $tooltip = $('<div style="display:none;position:absolute;padding:10px;background:rgba(0,0,0,0.5);"></div>').appendTo(document.body);

      function showTooltip(event) {
        $tooltip.text($(this).data('tooltip'));
        $tooltip.show().css({top:0, left:0});

        var calculator = new $.PositionCalculator({
          item: $tooltip,
          itemAt: "bottom left",
          target: this,
          targetAt: "top right",
          flip: "both"
        });
        var posResult = calculator.calculate();

        $tooltip.css({
          top: posResult.moveBy.y + "px",
          left: posResult.moveBy.x + "px"
        })
      }

      $('.has_tooltip').on('mouseenter', showTooltip);
      $('.has_tooltip').on('mouseout', function(){$tooltip.hide()});
    });
  </script>
</head>
<body>
  <input type="text" class="has_tooltip" data-tooltip="this is a tooltip" value="hover me"/>
</body>
</html>

Try this example at jsBin

Have a bug or a feature request? Please first search for existing and closed issues. If your problem or idea is not addressed yet, please open a new issue.

npm run build writes dist/. npm test runs the tests in headless Chrome (Node 24 or newer, Chrome). See CONTRIBUTING.md.

PositionCalculator use Semantic Versioning.

Releases will be numbered with the following format:

<major>.<minor>.<patch>

Tobias Lindig http://tlindig.de

Code and documentation copyright 2014 Tobias Lindig Code released under the MIT license.

• fix: calculate() threw an error if window was used as target. The visible area of the window is the target now.
• fix: stick: "all" and stick: true threw an error if the item was larger than the boundary on an axis. They behave now like listing all four edges.
• build: Grunt is replaced by npm run build (esbuild) and npm test (headless Chrome, Node 24 or newer). The source map is now dist/position-calculator.min.js.map.

• set minimum required version of jQuery to >1.8. jQuery 1.7 has a bug together with css property "box-sizing: border-box" that is fixed with 1.8. ( #10413, #11004 )

• add support for source map file
• add support for Bower

• add support for calculation without parameter "target" to calculate only overflow of item and boundary

• update jQuery manifest, add link to demo page

• first public release

Initial commit