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.
To build run Grunt.
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.
Initial commit