diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/util/delayedMouseLeave.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/util/delayedMouseLeave.directive.js
new file mode 100644
index 0000000000..94d5925f2c
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/util/delayedMouseLeave.directive.js
@@ -0,0 +1,26 @@
+angular.module("umbraco.directives")
+    .directive('delayedMouseleave', function ($timeout, $parse) {
+        return {
+            restrict: 'A',
+            link: function (scope, element, attrs, ctrl) {
+                var active = false;
+                var fn = $parse(attrs.delayedMouseleave);
+                element.on("mouseleave", function(event) {
+                    var callback = function() {
+                        fn(scope, {$event:event});
+                    };
+
+                    active = false;
+                    $timeout(function(){
+                        if(active === false){
+                            scope.$apply(callback);
+                        }
+                    }, 650);
+                });
+
+                element.on("mouseenter", function(event, args){
+                    active = true;
+                });
+            }
+        };
+    });
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/canvas.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/canvas.html
index 816c9f3412..d013b1e022 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/canvas.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/canvas.html
@@ -184,7 +184,7 @@
 
                                                 <!-- add stuff -->
                                                 <div class="cell-tools-add"
-                                                    ng-if="!currentToolsControl && control===currentControl && (area.max === undefined || area.max < area.controls.length)"
+                                                    ng-show="!currentToolsControl && control===currentControl && (area.max === undefined || area.max < area.controls.length)"
                                                     ng-animate="'fade'">
 
                                                     <div class="iconBox">
@@ -193,7 +193,7 @@
                                                         </a>
                                                     </div>
 
-                                                    <div ng-if="overlayMenu.show && overlayMenu.key == control.$uniqueId" ng-include="'views/propertyeditors/canvas/dialogs/additem.html'"></div>
+                                                    <div ng-show="overlayMenu.show && overlayMenu.key == control.$uniqueId" ng-include="'views/propertyeditors/canvas/dialogs/additem.html'"></div>
                                                 </div>
 
                                             </div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/dialogs/additem.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/dialogs/additem.html
index 1a69ed8e02..dec1d8a3bc 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/dialogs/additem.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/canvas/dialogs/additem.html
@@ -1,17 +1,17 @@
-<div class="cell-tools-menu" 
+<div class="cell-tools-menu"
     ng-style="overlayMenu.style"
-    ng-mouseleave="closeItemOverlay()">
-       
+    delayed-mouseleave="closeItemOverlay()">
+
      <h5>Insert control</h5>
 
      <ul class="elements">
         <li ng-repeat="editor in area.$allowedEditors">
             <a ng-click="addControl(editor, overlayMenu.area, overlayMenu.$index)" href>
-                <i class="icon {{editor.icon}}"></i>    
+                <i class="icon {{editor.icon}}"></i>
                 {{editor.name}}</a>
 
                 <pre>{{editor}}</pre>
         </li>
-     </ul>  
+     </ul>
 
-</div>
\ No newline at end of file
+</div>