Show images tooltip

https://github.com/rancher/rancher/issues/17043

app/components/accordion-pod/template.hbs

@@ -32,10 +32,17 @@
           <a href="{{href-to "pod" inst.id}}">{{inst.displayName}}</a>
         </td>
         <td data-title="{{dt.displayImage}}">
-          <small>{{inst.displayImage}}</small>
+          {{#tooltip-element
+              type="tooltip-basic"
+              tooltipTemplate='tooltip-multi-lines'
+              model=inst.displayImages
+              inlineBlock=true
+          }}
+            <span class="text-small">{{inst.displayImage}}</span>
+          {{/tooltip-element}}
           <p data-title="{{t 'generic.details'}}" class="text-small text-muted m-0 clip">
             {{#if inst.displayIp}}
-              {{inst.displayIp}} / 
+              {{inst.displayIp}} /
             {{/if}}
             {{t 'generic.createdDate' date=(date-from-now inst.created) htmlSafe=true}} / {{t 'generic.restarts'}} {{inst.restarts}}
           </p>

app/components/pod-row/template.hbs

@@ -26,7 +26,14 @@
     {{/if}}
   </td>
   <td data-title="{{dt.image}}" class="clip top-half">
-     <small>{{model.displayImage}}</small>
+      {{#tooltip-element
+          type="tooltip-basic"
+          tooltipTemplate='tooltip-multi-lines'
+          model=model.displayImages
+          inlineBlock=true
+      }}
+        <span class="text-small">{{model.displayImage}}</span>
+     {{/tooltip-element}}
      <p data-title="{{t 'generic.details'}}" class="text-small text-muted m-0 clip">
       {{#if model.displayIp}}
         {{#copy-inline clipboardText=model.displayIp}}{{format-ip model.displayIp}}{{/copy-inline}} /

app/components/workload-row/template.hbs

@@ -20,7 +20,14 @@
   </td>
   {{#if showImage}}
     <td data-title="{{dt.image}}" class="clip top-half">
-      <small>{{model.displayImage}}</small>
+      {{#tooltip-element
+          type="tooltip-basic"
+          tooltipTemplate='tooltip-multi-lines'
+          model=model.displayImages
+          inlineBlock=true
+      }}
+        <span class="text-small">{{model.displayImage}}</span>
+      {{/tooltip-element}}
       <p data-title="{{t 'generic.details'}}" class="text-small text-muted m-0 clip">
         {{#if subMatches}}
           {{#if (eq (get subMatches model.id) 0)}}

app/pod/template.hbs

@@ -26,11 +26,18 @@
       {{/copy-inline}}
     {{else}}
       {{t 'generic.none'}}
-    {{/if}}  
+    {{/if}}
   </div>
   <div class="vertical-middle">
     <label class="acc-label vertical-middle p-0">{{t 'podPage.image'}}:</label>
-    {{model.displayImage}}
+      {{#tooltip-element
+          type="tooltip-basic"
+          tooltipTemplate='tooltip-multi-lines'
+          model=model.displayImages
+          inlineBlock=true
+      }}
+        {{model.displayImage}}
+      {{/tooltip-element}}
   </div>
   <div class="vertical-middle">
     <label class="acc-label vertical-middle p-0">{{t 'dnsPage.type.workload'}}:</label>
@@ -70,7 +77,7 @@
   </div>
   <div class="vertical-middle">
     <label class="acc-label vertical-middle p-0">{{t 'generic.created'}}:</label>
-    {{date-calendar model.created}} 
+    {{date-calendar model.created}}
     <div class="text-muted text-small">{{t 'generic.restarts'}} {{model.restarts}}</div>
   </div>
 </div>
@@ -91,7 +98,7 @@
       {{pod-metrics resourceId=model.id}}
     {{/metrics-summary}}
   {{/if}}
-  
+
   {{resource-event-list
     resourceType=(t 'generic.pod')
     expandAll=al.expandAll
@@ -107,7 +114,7 @@
     expandAll=al.expandAll
     expandFn=expandFn
   }}
-  
+
   {{#if model.workload}}
     {{container/form-scheduling
       initialHostId=model.workload.nodeId

app/templates/tooltip-multi-lines.hbs

@@ -0,0 +1,5 @@
+{{#each model as |row|}}
+  <div class="text-left">
+    {{row}}
+  </div>
+{{/each}}

lib/shared/addon/mixins/display-image.js

@@ -5,6 +5,10 @@ import { inject as service } from '@ember/service';
 export default Mixin.create({
   intl: service(),
 
+  displayImages: computed('containers.@each.image', function() {
+    return (get(this, 'containers') || []).map((container) => get(container, 'image'));
+  }),
+
   displayImage: computed('containers.@each.image', function() {
     const containers = get(this, 'containers') || [];
     const count = get(containers, 'length');