Feature: Add agent tooltip in summary page

app/assets/stylesheets/agent_tooltip.scss

@@ -0,0 +1,29 @@
+.agent-container{
+    display: flex;
+    align-items: center;
+    margin: 10px;
+}
+.agent-circle{
+    width: 70px;
+    height: 70px;
+    background-color: var(--light-color);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 35px;
+    margin-right: 12px;
+}
+.agent-name{
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 3px;
+}
+.agent-dependency{
+    font-size: 16px;
+    font-weight: 400;
+    color: #767676;
+    margin-bottom: 3px;
+}
+.agent-type-icon path{
+    fill: var(--primary-color)
+}

app/assets/stylesheets/application.css.scss.erb

@@ -63,6 +63,7 @@
 /* Bootstrap and Font Awesome */
 @import "bootstrap";
 @import "bootstrap_overrides";
+@import "agent_tooltip";
 
 <% if (ui_theme = $UI_THEME.to_s.parameterize).present? && File.exists?(Rails.root.join('app', 'assets', 'stylesheets', 'themes', ui_theme)) %>
   @import "themes/<%= ui_theme %>/main";

app/helpers/agent_helper.rb

@@ -95,17 +95,6 @@ def display_identifiers(identifiers, link: true)
     end.join(', ')
   end
 
-  def display_agent(agent, link: true)
-    return agent if agent.is_a?(String)
-
-    out = agent.name.to_s
-    identifiers = display_identifiers(agent.identifiers, link: link)
-    out = "#{out} ( #{identifiers} )" unless identifiers.empty?
-    affiliations = Array(agent.affiliations).map { |a| display_agent(a, link: link) }.join(', ')
-    out = "#{out} (affiliations: #{affiliations})" unless affiliations.empty?
-    out
-  end
-
   def agent_field_name(name, name_prefix = '')
     name_prefix&.empty? ? name : "#{name_prefix}[#{name}]"
   end
@@ -166,4 +155,47 @@ def agent_usage_error_display(error)
       details.values.join(', ').html_safe
     end.join('. ').html_safe
   end
+
+  def display_agent(agent, link: true)
+    return agent if agent.is_a?(String)
+
+    out = agent.name.to_s
+    identifiers = display_identifiers(agent.identifiers, link: link)
+    out = "#{out} ( #{identifiers} )" unless identifiers.empty?
+    affiliations = Array(agent.affiliations).map { |a| display_agent(a, link: link) }.join(', ')
+    out = "#{out} (affiliations: #{affiliations})" unless affiliations.empty?
+    out
+  end
+
+  def agent_tooltip(agent)
+    name = agent.name
+    email = agent.email
+    type = agent.agentType 
+    identifiers = display_identifiers(agent.identifiers, link: false)
+    affiliations = Array(agent.affiliations).map { |a| display_agent(a, link: false) }.join(', ')
+    person_icon = inline_svg_tag 'icons/person.svg' , class: 'agent-type-icon'
+    organization_icon = inline_svg_tag 'icons/organization.svg', class: 'agent-type-icon'
+    agent_icon = type == "organization" ? organization_icon : person_icon
+    tooltip_html = generate_tooltip_html(agent_icon, name, email, identifiers, affiliations)
+    return tooltip_html
+  end
+
+  def generate_tooltip_html(agent_icon, name, email = nil, identifiers = nil, affiliations = nil)
+    content_tag(:div, class: 'agent-container') do
+      content_tag(:div, agent_icon, class: 'agent-circle') +
+      content_tag(:div) do
+        content_tag(:div, name, class: 'agent-name') +
+        content_tag(:div, email || '', class: 'agent-dependency') +
+        content_tag(:div, identifiers || '', class: 'agent-dependency') +
+        content_tag(:div, affiliations || '', class: 'agent-dependency')
+      end
+    end
+  end
+
+  def agent_chip_component(agent)
+    render ChipButtonComponent.new(type: "static",'data-controller':' tooltip', title: agent_tooltip(agent) , class: 'text-truncate', style: 'max-width: 280px; display:block; line-height: unset') do 
+      agent.name.to_s
+    end 
+  end 
+
 end

app/views/ontologies/sections/_metadata.html.haml

@@ -20,10 +20,8 @@
 
       = properties_dropdown('person_and_organization','Persons and organizations','', @agents_properties) do |values|
         = horizontal_list_container(values) do |v|
-          = render ChipButtonComponent.new(type: "static",'data-controller':' tooltip', title: '', class: 'text-truncate', style: 'max-width: 280px; display:block; line-height: unset') do
-            = display_agent(v, link: false)
-
-
+          = agent_chip_component(v)
+
       = properties_dropdown('link','Other links','Metadata properties that highlight the links enabling access to datasets, downloading semantic resources, etc', @links_properties) do |values|
         = horizontal_list_container(values) do |v|
           = render LinkFieldComponent.new(value: v, raw: true)