Merge pull request #3148 from sumitdaga/issue-3147

fix for issue #3147

Author: maxceem

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" />}

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;