Changed the behavior of the balloon tooltips

diff --git a/com.woltlab.wcf/template/headInclude.tpl b/com.woltlab.wcf/template/headInclude.tpl
index 5a4912af5ed0f07f83852b62ca33bbda63947ac8..e9b379587c4f26e65afe1a2c818a33f8cb434eb0 100644 (file)
--- 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 50acdfa80596ff2f1583c217d1c72dad0a6b7f4e..477058c0f509e7e24a6b38705ff311caa03caa5b 100644 (file)
--- 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 60ce2c2607b6f59a41fc6a709aaf03a709188c0d..a8daf75e5836c87d6c8e95703e9e820561b50c3f 100644 (file)
--- 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');
                }
        }
 };