On gists

Viewport utitilies (edges overlapping control)

jQuery

utitlies.js Raw #

		/*!
			* Check if an element is out of the viewport
			* (c) 2018 Chris Ferdinandi, MIT License, https://gomakethings.com
			* @param  {Node}  elem The element to check
			* @return {Object}     A set of booleans for each side of the element
			*/
			var isOutOfViewport = function (elem) {

				// Get element's bounding
				var bounding = elem.getBoundingClientRect();

				// Check if it's out of the viewport on each side
				var out = {};
				out.top = bounding.top < 0;
				out.left = bounding.left < 0;
				out.bottom = bounding.bottom > (window.innerHeight || document.documentElement.clientHeight);
				out.right = bounding.right > (window.innerWidth || document.documentElement.clientWidth);
				out.any = out.top || out.left || out.bottom || out.right;
				out.all = out.top && out.left && out.bottom && out.right;

				return out;

		};
		
		
		
		
		// from bottom to top
		// console.table({
		// 	'tooltipHeight': $tooltip.height(),
		// 	'offsetTop': offsetPos.y,
		// 	'positionTop': position.top,
		// 	'windowHeight': $(window).height(),
		// 	'documentHeight': $(document).height(),
		// 	'scrollTop': $(window).scrollTop(),
		// });
		
		if (offsetPos.y - $(window).scrollTop() + $tooltip.outerHeight(true) >  $(window).height())
		{
			var moveUp = offsetPos.y -  $tooltip.height() - 35;
			$tooltip.css({
				top: moveUp + "px"
			})
		}
		
		
		// right side
		var offset = $(this).offset();
		var position = $(this).position();
		var offsetPos = {
			x: offset.left,
			y: offset.top + 35,
		}

		// prevent overlapping on the right edge
		if (offsetPos.x + tooltipSize.w >= winSize.w)
		{
			offsetPos.x = winSize.w - tooltipSize.w - gutter;   
		}