diff --git a/public/css/icinga/widgets.less b/public/css/icinga/widgets.less
index d841667d3..13f83ac03 100644
--- a/public/css/icinga/widgets.less
+++ b/public/css/icinga/widgets.less
@@ -277,7 +277,17 @@ ul.tree li a.error:hover {
     width: 1em;
 
     position: absolute;
-    left: 4px;
+    left: 6px;
     top: -7px;
   }
+
+  &.flyover-right .flyover-content {
+    left: auto;
+    right: 0;
+  }
+
+  &.flyover-arrow-top.flyover-right .flyover-content:before {
+    left: auto;
+    right: 6px;
+  }
 }
diff --git a/public/js/icinga/behavior/flyover.js b/public/js/icinga/behavior/flyover.js
index 7930d3d08..3e018b2b8 100644
--- a/public/js/icinga/behavior/flyover.js
+++ b/public/js/icinga/behavior/flyover.js
@@ -28,6 +28,12 @@
             var $this = $(this);
 
             if (typeof expandedFlyovers['#' + $this.attr('id')] !== 'undefined') {
+                var $container = $this.closest('.container');
+
+                if ($this.offset().left - $container.offset().left > $container.innerWidth() / 2) {
+                    $this.addClass('flyover-right');
+                }
+
                 $this.toggleClass('flyover-expanded');
             }
         });
@@ -50,8 +56,16 @@
         $flyover.toggleClass('flyover-expanded');
 
         if ($flyover.hasClass('flyover-expanded')) {
+            var $container = $flyover.closest('.container');
+
+            if ($flyover.offset().left - $container.offset().left > $container.innerWidth() / 2) {
+                $flyover.addClass('flyover-right');
+            }
+
             expandedFlyovers['#' + $flyover.attr('id')] = null;
         } else {
+            $flyover.removeClass('flyover-right');
+
             delete expandedFlyovers['#' + $flyover.attr('id')];
         }
     };