From 69e29469a3ef06304cf61135b617f04afc954dd0 Mon Sep 17 00:00:00 2001
From: Hannes Mannerheim <h@nnesmannerhe.im>
Date: Mon, 14 Sep 2015 18:04:27 +0200
Subject: [PATCH] separate function for aligning tooltip, to be reused for the
 profile hoovercards

---
 js/misc-functions.js | 67 ++++++++++++++++++++++++++++++++++++++++++++
 js/qvitter.js        | 62 +++++-----------------------------------
 2 files changed, 74 insertions(+), 55 deletions(-)

diff --git a/js/misc-functions.js b/js/misc-functions.js
index d2b2ab9..2e60296 100644
--- a/js/misc-functions.js
+++ b/js/misc-functions.js
@@ -217,6 +217,73 @@ function checkLocalStorage() {
 	}
 
 
+
+/* ·
+   ·
+   ·  Align tooltips to the hoovered element
+   ·
+   · · · · · · · · · */
+
+function alignTooltipToHooveredElement(tooltipElement,tooltipCaret,hoovered) {
+	var tooltipWidth = tooltipElement.outerWidth();
+	var tooltipHeight = tooltipElement.outerHeight();
+	var windowWidth = $(window).width();
+	var windowScrollPosY = $(window).scrollTop();
+	var targetPosX = hoovered.offset().left;
+	var targetPosY = hoovered.offset().top;
+	var targetHeight = hoovered.outerHeight();
+	var targetWidth = hoovered.outerWidth();
+
+	// too little space on top of element, show tooltip at bottom
+	if((targetPosY-windowScrollPosY-tooltipHeight-10) < 0) {
+		var tooltipCaretPosX = targetPosX+targetWidth/2-5;
+		var tooltipCaretPosY = targetPosY+targetHeight+2;
+
+		// caret always directly under element
+		tooltipCaret.css('left',tooltipCaretPosX + 'px');
+		tooltipCaret.css('top',tooltipCaretPosY + 'px');
+		tooltipCaret.addClass('top');
+
+		// tooltip itself might bleed over the window edges, and need moving
+		var tooltipPosX = targetPosX+targetWidth/2-tooltipWidth/2;
+		var tooltipPosY = targetPosY+targetHeight+7;
+		if((tooltipPosX+tooltipWidth)>windowWidth) {
+			tooltipPosX = windowWidth-tooltipWidth-5;
+			}
+		if(tooltipPosX < 5) {
+			tooltipPosX = 5;
+			}
+		tooltipElement.css('left',tooltipPosX + 'px');
+		tooltipElement.css('top',tooltipPosY + 'px');
+		}
+	// tooltip at top
+	else {
+		var tooltipCaretPosX = targetPosX+targetWidth/2-5;
+		var tooltipCaretPosY = targetPosY-7;
+
+		// caret always directly on top of element
+		tooltipCaret.css('left',tooltipCaretPosX + 'px');
+		tooltipCaret.css('top',tooltipCaretPosY + 'px');
+		tooltipCaret.addClass('bottom');
+
+		// tooltip itself might bleed over the window edges, and need moving
+		var tooltipPosX = targetPosX+targetWidth/2-tooltipWidth/2;
+		var tooltipPosY = targetPosY-7-tooltipHeight;
+		if((tooltipPosX+tooltipWidth)>windowWidth) {
+			tooltipPosX = windowWidth-tooltipWidth-5;
+			}
+		if(tooltipPosX < 5) {
+			tooltipPosX = 5;
+			}
+		tooltipElement.css('left',tooltipPosX + 'px');
+		tooltipElement.css('top',tooltipPosY + 'px');
+
+		}
+	}
+
+
+
+
 /* ·
    ·
    ·  Cache the unicode compatible regexps for the syntax highlighting
diff --git a/js/qvitter.js b/js/qvitter.js
index f8e0481..afef541 100644
--- a/js/qvitter.js
+++ b/js/qvitter.js
@@ -109,62 +109,14 @@ $('body').on({
 
 		// show tooltips
 		if($(e.target).is('[data-tooltip]')) {
-			var tooltip = $(e.target).attr('data-tooltip');
-			$('body').prepend('<div class="tooltip-caret"></div><div class="tooltip">' + tooltip + '</div>');
-			var tooltipWidth = $('.tooltip').outerWidth();
-			var tooltipHeight = $('.tooltip').outerHeight();
-			var windowWidth = $(window).width();
-			var windowScrollPosY = $(window).scrollTop();
-			var targetPosX = $(e.target).offset().left;
-			var targetPosY = $(e.target).offset().top;
-			var targetHeight = $(e.target).outerHeight();
-			var targetWidth = $(e.target).outerWidth();
+			var tooltip_text = $(e.target).attr('data-tooltip');
+			var tooltipElement = $('<div class="tooltip">' + tooltip_text + '</div>');
+			var tooltipCaret = $('<div class="tooltip-caret"></div>');
+			$('body').prepend(tooltipElement);
+			$('body').prepend(tooltipCaret);
 
-			// too little space on top of element, show tooltip at bottom
-			if((targetPosY-windowScrollPosY-tooltipHeight-10) < 0) {
-				var tooltipCaretPosX = targetPosX+targetWidth/2-5;
-				var tooltipCaretPosY = targetPosY+targetHeight+2;
-
-				// caret always directly under element
-				$('.tooltip-caret').css('left',tooltipCaretPosX + 'px');
-				$('.tooltip-caret').css('top',tooltipCaretPosY + 'px');
-				$('.tooltip-caret').addClass('top');
-
-				// tooltip itself might bleed over the window edges, and need moving
-				var tooltipPosX = targetPosX+targetWidth/2-tooltipWidth/2;
-				var tooltipPosY = targetPosY+targetHeight+7;
-				if((tooltipPosX+tooltipWidth)>windowWidth) {
-					tooltipPosX = windowWidth-tooltipWidth-5;
-					}
-				if(tooltipPosX < 5) {
-					tooltipPosX = 5;
-					}
-				$('.tooltip').css('left',tooltipPosX + 'px');
-				$('.tooltip').css('top',tooltipPosY + 'px');
-				}
-			// tooltip at top
-			else {
-				var tooltipCaretPosX = targetPosX+targetWidth/2-5;
-				var tooltipCaretPosY = targetPosY-7;
-
-				// caret always directly on top of element
-				$('.tooltip-caret').css('left',tooltipCaretPosX + 'px');
-				$('.tooltip-caret').css('top',tooltipCaretPosY + 'px');
-				$('.tooltip-caret').addClass('bottom');
-
-				// tooltip itself might bleed over the window edges, and need moving
-				var tooltipPosX = targetPosX+targetWidth/2-tooltipWidth/2;
-				var tooltipPosY = targetPosY-7-tooltipHeight;
-				if((tooltipPosX+tooltipWidth)>windowWidth) {
-					tooltipPosX = windowWidth-tooltipWidth-5;
-					}
-				if(tooltipPosX < 5) {
-					tooltipPosX = 5;
-					}
-				$('.tooltip').css('left',tooltipPosX + 'px');
-				$('.tooltip').css('top',tooltipPosY + 'px');
-
-				}
+			// align tooltip to the hoovered element
+			alignTooltipToHooveredElement(tooltipElement,tooltipCaret,$(e.target));
 
 			// fade in
 			$('.tooltip').css('opacity','1');