Usage and Lease creation datetime displayed in tooltips

kahuna/public/js/components/gr-image-usage/gr-image-usage-list.html

@@ -11,7 +11,8 @@
             {{usage.title}}
 
             <div class="more-info">
-                <span class="date-added">{{::ctrl.formatTimestamp(usage.dateAdded)}}</span>
+                <span title="{{usage.dateAdded | date:'d MMM yyyy, HH:mm'}}" class="date-added">{{::ctrl.formatTimestamp(usage.dateAdded)}}</span>
+
                 <ul class="reference-list">
                     <li ng-repeat="reference in usage.references">
                         <a ng-if="reference.uri" href="{{reference.uri}}" title="Open in {{reference.type}}" rel="noopener" target="_blank">

kahuna/public/js/components/gr-tooltip/gr-tooltip.js

@@ -14,17 +14,33 @@ tooltip.directive('grTooltip', [
               }
 
                 const position = attrs.grTooltipPosition || 'bottom';
-                element.attr('data-title', attrs.grTooltip)
-                    .addClass(`titip-default`)
-                    .addClass(`titip-${position}`);
+                element.addClass('titip-default').addClass(`titip-${position}`);
 
-                const autoUpdates = angular.isDefined(attrs.grTooltipUpdates);
+              // Remove any previous .titip-content
+              element.find('.titip-content').remove();
+
+              if (attrs.grTooltipHtml !== undefined) {
+                // Use .titip-content for HTML tooltips
+                const content = attrs.grTooltip || '';
+                const contentSpan = angular.element('<span class="titip-content"></span>');
+                contentSpan.text(content);
+                element.append(contentSpan);
+              } else {
+                // Use data-title for plain text tooltips
+                element.attr('data-title', attrs.grTooltip);
+              }
+
+                 const autoUpdates = angular.isDefined(attrs.grTooltipUpdates);
 
                 if (autoUpdates) {
-                    $scope.$watch(() => attrs.grTooltip, onValChange(newTooltip => {
-                        element.attr('data-title', newTooltip);
-                    }));
+                  $scope.$watch(() => attrs.grTooltip, onValChange(newTooltip => {
+                    if (attrs.grTooltipHtml !== undefined) {
+                      element.find('.titip-content').text(newTooltip);
+                    } else {
+                      element.attr('data-title', newTooltip);
+                    }
+                  }));
                 }
-            }
+          }
     };
 }]);

kahuna/public/js/leases/leases.html

@@ -142,6 +142,7 @@
     <li ng-switch-default
         ng-repeat="lease in ctrl.leases.leases"
         gr-tooltip="{{ctrl.toolTip(lease)}}"
+        gr-tooltip-html
         class="lease__item"
         gr-tooltip-position="bottom">
 

kahuna/public/js/leases/leases.js

@@ -209,7 +209,7 @@ leases.controller('LeasesCtrl', [
           };
 
           ctrl.toolTip = (lease) => {
-            return Boolean(lease.leasedBy) ? `leased by: ${lease.leasedBy}` : ``;
+            return Boolean(lease.leasedBy) ? `leased by: ${lease.leasedBy}\nleased at: ${moment(lease.createdAt).format('D MMM YYYY, HH:mm')}` : ``;
           };
 
           ctrl.inactiveLeases = (leases) => {

kahuna/public/stylesheets/main.css

@@ -3085,3 +3085,8 @@ FIXME: what to do with touch devices
   background-color: teal;
   color: white;
 }
+
+.titip-default .titip-content {
+  line-height: 1.4;
+  white-space: preserve nowrap;
+}