From 257248cdaa8ff1f839630e412b9555fb080b838c Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Thu, 3 Nov 2011 18:21:28 +0100
Subject: [PATCH] Changed the behavior of the balloon tooltips

---
 com.woltlab.wcf/template/headInclude.tpl   |  6 +++
 wcfsetup/install/files/acp/style/style.css | 20 ++++++++
 wcfsetup/install/files/js/WCF.js           | 55 ++++++++--------------
 3 files changed, 46 insertions(+), 35 deletions(-)

diff --git a/com.woltlab.wcf/template/headInclude.tpl b/com.woltlab.wcf/template/headInclude.tpl
index 5a4912af5e..e9b379587c 100644
--- a/com.woltlab.wcf/template/headInclude.tpl
+++ b/com.woltlab.wcf/template/headInclude.tpl
@@ -51,6 +51,12 @@
 			'wcf.global.page.previous': '{capture assign=pagePrevious}{lang}wcf.global.page.previous{/lang}{/capture}{@$pagePrevious|encodeJS}'
 			{event name='javascriptLanguageImport'}
 		});
+
+		WCF.Icon.addObject({
+			'foo': 'bar'
+			{event name='javascriptIconImport'}
+		});
+		
 		new WCF.Date.Time();
 		new WCF.Effect.SmoothScroll();
 		new WCF.Effect.BalloonTooltip();
diff --git a/wcfsetup/install/files/acp/style/style.css b/wcfsetup/install/files/acp/style/style.css
index 50acdfa805..477058c0f5 100644
--- a/wcfsetup/install/files/acp/style/style.css
+++ b/wcfsetup/install/files/acp/style/style.css
@@ -2748,7 +2748,27 @@ img[src*='enable'] {
 	cursor: pointer;
 }
 
+#balloonTooltip .arrowOuter {	
+	border-width: 0 7px 7px;
+	border-style: solid;
+	border-color: #ccc transparent;
+	display: inline-block !important;
+	width: 0;
+	position: absolute;
+	top: -7px !important;
+	left: 50%;
+}
 
+#balloonTooltip .arrowInner {	
+	border-width: 0 5px 5px;
+	border-style: solid;
+	border-color: #000 transparent;
+	display: inline-block;
+	width: 0;
+	position: absolute;
+	top: 2px;
+	left: -5px;
+}
 
 /* -- -- -- Collapsible -- -- -- */
 
diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 60ce2c2607..a8daf75e58 100644
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -2666,7 +2666,7 @@ WCF.Effect.BalloonTooltip = function() { this.init(); };
 WCF.Effect.BalloonTooltip.prototype = {
 	init: function() {
 		// create empty div
-		this.tooltip = $('<div id="balloonTooltip" style="position:absolute"></div>').appendTo(document.body).hide();
+		this.tooltip = $('<div id="balloonTooltip" style="position:absolute"><span id="balloonTooltipText"></span><span class="arrowOuter"><span class="arrowInner"></span></span></div>').appendTo(document.body).hide();
 	
 		// init elements
 		$('.balloonTooltip').live('mouseenter', $.proxy(this._initTooltip, this));
@@ -2681,9 +2681,7 @@ WCF.Effect.BalloonTooltip.prototype = {
 			$.proxy(this._mouseLeaveHandler, this)
 		);
 		
-		$(event.currentTarget).mousemove(
-			$.proxy(this._mouseMoveHandler, this)	
-		);
+		this._mouseEnterHandler(event);
 	},
 	
 	_mouseEnterHandler: function(event) {
@@ -2692,42 +2690,29 @@ WCF.Effect.BalloonTooltip.prototype = {
 			$element.data('tooltip', $element.attr('title'));
 			$element.attr('title', '');
 		
-			this.tooltip.text($element.data('tooltip')).fadeIn('fast');
-		}
-	},
-	
-	_mouseLeaveHandler: function(event) {
-		var $element = $(event.currentTarget);
-		if ($element.data('tooltip')) {
-			$element.attr('title', $element.data('tooltip'));
-			$element.data('tooltip', '');
+			// update text
+			this.tooltip.find('#balloonTooltipText').text($element.data('tooltip'));
 			
-			this.tooltip.hide();
-		}
-	},
-	
-	/**
-	 * Moves tooltip to cursor position.
-	 */
-	_mouseMoveHandler: function(event) {
-		var $element = $(event.currentTarget);
-		if ($element.attr('title')) {
-			this._mouseEnterHandler(event);
-		}
+			// calculate position
+			var $elementOffsets = $element.getOffsets('offset');
+			var $elementDimensions = $element.getDimensions('outer');
+			var $tooltipDimensions = this.tooltip.getDimensions('outer');
+			
+			var $top = $elementOffsets.top + $elementDimensions.height;
+			var $left = $elementOffsets.left - ($tooltipDimensions.width / 2) + ($elementDimensions.width / 2);
 		
-		if (event.pageX + 10 + this.tooltip.getDimensions().width >= $(window).width()) {
 			this.tooltip.css({
-				top: (event.pageY + 20) + "px",
-				right: ($(document).width() - event.pageX - 5) + "px",
-				left: "auto"
+				top: ($top + 7) + "px",
+				left: ($left) + "px"
 			});
-		}
-		else {
-			this.tooltip.css({
-				top: (event.pageY + 20) + "px",
-				left: (event.pageX + 5) + "px",
-				right: "auto"
+			
+			// arrow positioning
+			this.tooltip.find('.arrowOuter').css({
+				left: (this.tooltip.getDimensions().width / 2 + 3) + "px"
 			});
+		
+			// show tooltip
+			this.tooltip.fadeIn('fast');
 		}
 	}
 };
-- 
2.20.1