Adjust tooltip position inside overlay (#8416)

src/Umbraco.Web.UI.Client/src/common/directives/components/umbtooltip.directive.js

@@ -77,13 +77,17 @@ Use this directive to render a tooltip.
          scope.tooltipStyles.left = 0;
          scope.tooltipStyles.top = 0;
 
-         function setTooltipPosition(event) {
+          function setTooltipPosition(event) {
 
-            var container = $("#contentwrapper");
-            var containerLeft = container[0].offsetLeft;
-            var containerRight = containerLeft + container[0].offsetWidth;
-            var containerTop = container[0].offsetTop;
-            var containerBottom = containerTop + container[0].offsetHeight;
+            var overlay = $(event.target).closest('.umb-overlay');
+            var container = overlay.length > 0 ? overlay : $("#contentwrapper");
+
+            let rect = container[0].getBoundingClientRect();
+
+            var containerLeft = rect.left;
+            var containerRight = containerLeft + rect.width;
+            var containerTop = rect.top;
+            var containerBottom = containerTop + rect.height;
 
             var elementHeight = null;
             var elementWidth = null;
@@ -102,39 +106,43 @@ Use this directive to render a tooltip.
             position.left = event.pageX - (elementWidth / 2);
             position.top = event.pageY;
 
-            // check to see if element is outside screen
-            // outside right
-            if (position.left + elementWidth > containerRight) {
-               position.right = 10;
-               position.left = "inherit";
+            if (overlay.length > 0) {
+                position.left = event.pageX - rect.left - (elementWidth / 2);
+                position.top = event.pageY - rect.top;
             }
+            else {
+                // check to see if element is outside screen
+                // outside right
+                if (position.left + elementWidth > containerRight) {
+                    position.right = 10;
+                    position.left = "inherit";
+                }
 
-            // outside bottom
-            if (position.top + elementHeight > containerBottom) {
-               position.bottom = 10;
-               position.top = "inherit";
-            }
+                // outside bottom
+                if (position.top + elementHeight > containerBottom) {
+                    position.bottom = 10;
+                    position.top = "inherit";
+                }
 
-            // outside left
-            if (position.left < containerLeft) {
-               position.left = containerLeft + 10;
-               position.right = "inherit";
-            }
+                // outside left
+                if (position.left < containerLeft) {
+                    position.left = containerLeft + 10;
+                    position.right = "inherit";
+                }
 
-            // outside top
-            if (position.top < containerTop) {
-               position.top = 10;
-               position.bottom = "inherit";
+                // outside top
+                if (position.top < containerTop) {
+                    position.top = 10;
+                    position.bottom = "inherit";
+                }
             }
 
             scope.tooltipStyles = position;
 
             el.css(position);
-
          }
 
          setTooltipPosition(scope.event);
-
       }
 
       var directive = {

src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.controller.js

@@ -24,11 +24,11 @@ function ItemPickerOverlay($scope, localizationService) {
         event: null
     };
 
-    $scope.showTooltip = function(item, $event) {
+    $scope.showTooltip = function (item, $event) {
         if (!item.tooltip) {
-            $scope.mouseLeave();
             return;
         }
+
         $scope.tooltip = {
             show: true,
             event: $event,

src/Umbraco.Web.UI.Client/src/views/common/overlays/itempicker/itempicker.html

@@ -1,7 +1,7 @@
 <div ng-controller="Umbraco.Overlays.ItemPickerOverlay" class="umb-itempicker">
 
     <div class="form-search" ng-hide="model.filter === false" style="margin-bottom: 15px;">
-        <i class="icon-search"></i>
+        <i class="icon-search" aria-hidden="true"></i>
         <input type="text"
                ng-model="searchTerm"
                class="umb-search-field search-query input-block-level -full-width-input"
@@ -14,15 +14,15 @@
     <div class="umb-overlay__section-header" ng-if="(model.pasteItems | filter:searchTerm).length > 0">
         <h5><localize key="content_createFromClipboard">Paste from clipboard</localize></h5>
         <button ng-if="model.clickClearPaste" ng-click="model.clickClearPaste($event)" alt="Clear clipboard for entries accepted in this context.">
-            <i class="icon-trash"></i>
+            <i class="icon-trash" aria-hidden="true"></i>
         </button>
     </div>
 
     <ul class="umb-card-grid" ng-class="{'-three-in-row': model.availableItems.length < 7, '-four-in-row': model.availableItems.length >= 7}">
         <li ng-repeat="pasteItem in model.pasteItems | filter:searchTerm">
-            <button class="umb-card-grid-item btn-reset" ng-click="model.clickPasteItem(pasteItem)">
+            <button type="button" class="umb-card-grid-item btn-reset" ng-click="model.clickPasteItem(pasteItem)">
                 <span>
-                    <i class="{{ pasteItem.icon }}"></i>
+                    <i class="{{ pasteItem.icon }}" aria-hidden="true"></i>
                     {{ pasteItem.name | truncate:true:36 }}
                 </span>
             </button>
@@ -35,10 +35,10 @@
 
     <ul class="umb-card-grid" ng-class="{'-three-in-row': model.availableItems.length < 7, '-four-in-row': model.availableItems.length >= 7}">
         <li ng-repeat="availableItem in model.availableItems | compareArrays:model.selectedItems:'alias' | orderBy:model.orderBy | filter:searchTerm">
-            <button class="umb-card-grid-item btn-reset" ng-click="selectItem(availableItem)">
-                <span>
-                    <i class="{{ availableItem.icon }}"></i>
-                    <span ng-mouseover="showTooltip(availableItem, $event)" ng-mouseleave="hideTooltip()">{{ availableItem.name }}</span>                    
+            <button type="button" class="umb-card-grid-item btn-reset" ng-click="selectItem(availableItem)">
+                <span ng-mouseover="showTooltip(availableItem, $event)" ng-mouseleave="hideTooltip()">
+                    <i class="{{ availableItem.icon }}" aria-hidden="true"></i>
+                    <span>{{ availableItem.name }}</span>
                 </span>
             </button>
         </li>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/nestedcontent/nestedcontent.controller.js

@@ -195,7 +195,8 @@
                 availableItems.push({
                     alias: scaffold.contentTypeAlias,
                     name: scaffold.contentTypeName,
-                    icon: iconHelper.convertFromLegacyIcon(scaffold.icon)
+                    icon: iconHelper.convertFromLegacyIcon(scaffold.icon),
+                    tooltip: scaffold.documentType.description
                 });
             });