From 380770c6589892e0009360bc755e9c3a3b356536 Mon Sep 17 00:00:00 2001
From: sumitdaga <sumit.daga66@gmail.com>
Date: Fri, 5 Jul 2019 15:02:35 +0530
Subject: [PATCH] fix for issue 3147

---
 .../detail/components/Accordion/Accordion.jsx        | 12 +++++++++++-
 .../detail/components/Accordion/Accordion.scss       |  9 ++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/projects/detail/components/Accordion/Accordion.jsx b/src/projects/detail/components/Accordion/Accordion.jsx
index 4c3b8f500..cc1cbd971 100644
--- a/src/projects/detail/components/Accordion/Accordion.jsx
+++ b/src/projects/detail/components/Accordion/Accordion.jsx
@@ -11,6 +11,9 @@ import cn from 'classnames'
 import IconX from '../../../../assets/icons/ui-x-mark.svg'
 import IconCarretDown from '../../../../assets/icons/arrow-6px-carret-down-normal.svg'
 
+import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip'
+import { TOOLTIP_DEFAULT_DELAY } from '../../../../config/constants'
+
 import './Accordion.scss'
 
 /**
@@ -132,7 +135,14 @@ class Accordion extends React.Component {
     return (
       <div styleName={cn('container', { 'is-open': isOpen })}>
         <button styleName="header" onClick={this.toggle}>
-          <h5 styleName="title">{title}</h5>
+          <Tooltip theme="light" tooltipDelay={TOOLTIP_DEFAULT_DELAY}>
+            <div className="tooltip-target">
+              <h5 styleName="title">{title}</h5>
+            </div>
+            <div className="tooltip-body">
+              {title}
+            </div>
+          </Tooltip>
           <div styleName="value">{this.formatValue()}</div>
           <div styleName="toggle">
             {isOpen ? <IconX styleName="toggle-icon" /> : <IconCarretDown styleName="toggle-icon" />}
diff --git a/src/projects/detail/components/Accordion/Accordion.scss b/src/projects/detail/components/Accordion/Accordion.scss
index a8f74f67b..205f1e820 100644
--- a/src/projects/detail/components/Accordion/Accordion.scss
+++ b/src/projects/detail/components/Accordion/Accordion.scss
@@ -19,6 +19,14 @@
     display: none;
   }
 
+  :global .Tooltip {
+    width: 180px;
+
+    .tooltip-target {
+      cursor: pointer;
+    }
+  }
+
   & + & {
     margin-top: 2 * $base-unit;
   }
@@ -40,7 +48,6 @@
 
 .title {
   @include roboto-bold;
-  flex: 0 0 180px;
   font-size: $tc-label-lg;
   overflow: hidden;
   padding: 0 2 * $base-unit;