From a44d2633a15011f74359f3d11ae75879dbe66ab7 Mon Sep 17 00:00:00 2001
From: Carla Duarte <cduarte@edx.org>
Date: Mon, 10 Aug 2020 09:37:01 -0400
Subject: [PATCH] AA-255: Dates Tab Tooltip for ORA (#173)

---
 src/course-home/dates-tab/Day.jsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/course-home/dates-tab/Day.jsx b/src/course-home/dates-tab/Day.jsx
index d795381c..6fc85aa0 100644
--- a/src/course-home/dates-tab/Day.jsx
+++ b/src/course-home/dates-tab/Day.jsx
@@ -3,6 +3,9 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useSelector } from 'react-redux';
 import { FormattedDate, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Tooltip, OverlayTrigger } from '@edx/paragon';
+import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 import { useModel } from '../../generic/model-store';
 
@@ -62,9 +65,18 @@ function Day({
                   {item.assignmentType && `${item.assignmentType}: `}{title}
                 </span>
                 {itemBadges}
+                {item.extraInfo && (
+                  <OverlayTrigger
+                    placement="bottom"
+                    overlay={
+                      <Tooltip>{item.extraInfo}</Tooltip>
+                    }
+                  >
+                    <FontAwesomeIcon icon={faInfoCircle} className="fa-xs ml-1 text-gray-700" />
+                  </OverlayTrigger>
+                )}
               </div>
               {item.description && <div className="small mb-2">{item.description}</div>}
-              {item.extraInfo && <div className="small mb-2">{item.extraInfo}</div>}
             </div>
           );
         })}