From 8624a3ca963403647d5d876b9ca0bd79e66e7012 Mon Sep 17 00:00:00 2001
From: Divyanshi Singh <divyanshipilot@gmail.com>
Date: Mar 31 2021 17:22:18 +0000
Subject: tooltip added on question icon (#8)


---

diff --git a/src/components/TooltipItem/index.js b/src/components/TooltipItem/index.js
new file mode 100644
index 0000000..3747472
--- /dev/null
+++ b/src/components/TooltipItem/index.js
@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import { Tooltip } from "reactstrap";
+
+const TooltipItem = props => {
+  const { placement, id, content, toolTipText } = props;
+  const [tooltipOpen, setTooltipOpen] = useState(false);
+
+  const toggle = () => setTooltipOpen(!tooltipOpen);
+
+  return (
+    <span>
+        {content}
+      <Tooltip
+        placement={placement}
+        isOpen={tooltipOpen}
+        target={"Tooltip-" + id}
+        toggle={toggle}
+      >
+        {toolTipText}
+      </Tooltip>
+    </span>
+  );
+};
+export default TooltipItem;
\ No newline at end of file
diff --git a/src/landingpage/Timeline.js b/src/landingpage/Timeline.js
index 1de10c5..0f22ee0 100644
--- a/src/landingpage/Timeline.js
+++ b/src/landingpage/Timeline.js
@@ -1,12 +1,13 @@
 import React, { Component } from "react"
 import SourceLink from './SourceLink'
+import TooltipItem from "../components/TooltipItem";
 
 class Timeline extends Component {
   constructor(props) {
     super(props)
     this.state = { schedule: [] }
   }
-
+  
   get_title(summary) {
     summary = summary.toLowerCase()
     if (summary.includes("freeze"))
@@ -36,13 +37,19 @@ class Timeline extends Component {
       )
     })
 
-    const schedule = this.props.data.map((milestone) => {
+    const schedule = this.props.data.map((milestone,index) => {
       return (
         <td
           key={"schedule" + milestone.summary}
-          title={this.get_title(milestone.summary)}
           width="150">
-          {milestone.summary} <i className="fas fa-question-circle light"></i>
+          {milestone.summary} 
+          <TooltipItem 
+            key={index} 
+            content={<span id={"Tooltip-" + index}> <i className="fas fa-question-circle light"></i> </span>} 
+            placement="right" 
+            id={index}
+            toolTipText={this.get_title(milestone.summary)}
+          />
         </td>
       )
     })