Calculate the position of an element relative to another element or event. It has also functionality to handle collision within the viewport of a given container. It does not manipulate CSS or DOM, it only calculates values. It is a basic technology to support implementation of tooltips, popups, popovers, scrollspies and many more.

position, boundary, placement, calculate, reference, target, viewport, collision, offset, relative, translate, sticky, flip, fit, ui, tlindig
bower install position-calculator



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.

Getting Started

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."

Documentation and Demo

Visit demonstration and documentation page: Position Calculator

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

Usage example:

<!DOCTYPE html>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
  <script src="http://rawgithub.com/tlindig/position-calculator/master/dist/position-calculator.min.js"></script>
  <meta charset="utf-8">
    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.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();

          top: posResult.moveBy.y + "px",
          left: posResult.moveBy.x + "px"

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

Try this example at jsBin

Bugs and feature requests

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.


To build run Grunt.


PositionCalculator use Semantic Versioning.

Releases will be numbered with the following format:



Tobias Lindig http://tlindig.de

Copyright and license

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


1.1.2 (July 1, 2014)

  • 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 )

1.1.1 (April 17, 2014)

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

1.1.0 (March 28, 2014)

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

1.0.1 (March 28, 2014)

  • update jQuery manifest, add link to demo page

1.0.0 (March 28, 2014)

  • first public release

0.0.0 (February 21, 2014)

Initial commit