Feat: Tooltips for district rows. (#1476)

covid19india · Apr 25, 2020 · fcbc521 · fcbc521
1 parent 84fbfa1
commit fcbc521
Showing 1 changed file with 36 additions and 13 deletions.
diff --git a/src/components/row.js b/src/components/row.js
@@ -284,7 +284,19 @@ function Row(props) {
                   }
                   onMouseLeave={() => props.onHighlightDistrict?.()}
                 >
-                  <td style={{fontWeight: 600}}>{district}</td>
+                  <td className="unknown" style={{fontWeight: 600}}>
+                    {district}
+                    <span onClick={handleTooltip}>
+                      <span
+                        data-for="unknown"
+                        data-tip={[[sortedDistricts[district].notes]]}
+                        data-event="touchstart mouseover"
+                        data-event-off="mouseleave"
+                      >
+                        {sortedDistricts[district].notes && <Icon.Info />}
+                      </span>
+                    </span>
+                  </td>
                   <td>
                     <span className="deltas" style={{color: '#ff073a'}}>
                       {sortedDistricts[district].delta.confirmed > 0 && (
@@ -312,23 +324,14 @@ function Row(props) {
               <span onClick={handleTooltip}>
                 <span
                   data-for="unknown"
-                  data-tip={[
-                    'Awaiting patient-level details from State Bulletin',
-                  ]}
+                  data-tip={
+                    'Awaiting patient-level details from State Bulletin'
+                  }
                   data-event="touchstart mouseover"
                   data-event-off="mouseleave"
                 >
                   <Icon.Info />
                 </span>
-                <ReactTooltip
-                  id="unknown"
-                  place="right"
-                  type="dark"
-                  effect="solid"
-                  multiline={true}
-                  scrollHide={true}
-                  globalEventOff="click"
-                />
               </span>
             </td>
             <td>
@@ -348,6 +351,26 @@ function Row(props) {
         </React.Fragment>
       )}
 
+      {showDistricts && (
+        <React.Fragment>
+          <tr>
+            <td colSpan={2}>
+              <span className="unknown">
+                <ReactTooltip
+                  id="unknown"
+                  place="right"
+                  type="dark"
+                  effect="solid"
+                  multiline={true}
+                  scrollHide={true}
+                  globalEventOff="click"
+                />
+              </span>
+            </td>
+          </tr>
+        </React.Fragment>
+      )}
+
       <tr
         className={`spacer`}
         style={{display: props.reveal && !props.total ? '' : 'none'}}