Fixes balloon tooltips

Balloon tooltips will show up above the hovered element if necessary

diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js
index 9c38fbbbb0d3fa1ea7eba97cd9511bb021265481..bdb635fff03ab8a13af171bcfbf066e0dc8506fc 100755 (executable)
--- a/wcfsetup/install/files/js/WCF.js
+++ b/wcfsetup/install/files/js/WCF.js
@@ -4230,7 +4230,16 @@ WCF.Effect.BalloonTooltip = Class.extend({
                }
                
                // calculate top offset
-               var $top = $elementOffsets.top + $elementDimensions.height + 7;
+               if ($elementOffsets.top + $elementDimensions.height + $tooltipDimensions.height - $(document).scrollTop() < $(window).height()) {
+                       var $top = $elementOffsets.top + $elementDimensions.height + 7;
+                       this._tooltip.removeClass('inverse');
+                       $arrow.css('top', -5);
+               }
+               else {
+                       var $top = $elementOffsets.top - $elementDimensions.height - 7;
+                       this._tooltip.addClass('inverse');
+                       $arrow.css('top', $tooltipDimensions.height);
+               }
                
                // calculate left offset
                switch ($alignment) {

diff --git a/wcfsetup/install/files/style/global.less b/wcfsetup/install/files/style/global.less
index 07c02cae8af1464c736b6d41f94f9b6d16af202b..1e1166fba211e21e6296949f520221a37e26f738 100644 (file)
--- a/wcfsetup/install/files/style/global.less
+++ b/wcfsetup/install/files/style/global.less
@@ -164,8 +164,6 @@ body > iframe[src="about:blank"] {
        z-index: 800;
        
        .borderRadius(6px);
-       .boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
-       
        .pointer {
                border-color: @wcfTooltipBackgroundColor transparent;
                border-style: solid;
@@ -174,6 +172,15 @@ body > iframe[src="about:blank"] {
                position: absolute;
                top: -5px;
        }
+       
+       .boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
+       
+       &.inverse {
+               .boxShadow(0, -3px, rgba(0, 0, 0, .3), 7px);
+               .pointer {
+                       border-width: 5px 5px 0;
+               }
+       }
 }
 
 /* popover */