From 044786c5d6971b656d85dba2f8101b1f5fba0333 Mon Sep 17 00:00:00 2001
From: Beto Dealmeida <roberto@dealmeida.net>
Date: Tue, 5 Mar 2019 15:43:03 +0200
Subject: [PATCH] Show tooltip with time frame

---
 .../components/controls/DateFilterControl.jsx | 34 ++++++++++++++-----
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/superset/assets/src/explore/components/controls/DateFilterControl.jsx b/superset/assets/src/explore/components/controls/DateFilterControl.jsx
index 9e07b99037ca..b068945bb6a7 100644
--- a/superset/assets/src/explore/components/controls/DateFilterControl.jsx
+++ b/superset/assets/src/explore/components/controls/DateFilterControl.jsx
@@ -32,6 +32,7 @@ import {
   Radio,
   Tab,
   Tabs,
+  Tooltip,
 } from 'react-bootstrap';
 import Datetime from 'react-datetime';
 import 'react-datetime/css/react-datetime.css';
@@ -311,15 +312,30 @@ export default class DateFilterControl extends React.Component {
         {grain}
       </MenuItem>
       ));
-    const timeFrames = COMMON_TIME_FRAMES.map(timeFrame => (
-      <Radio
-        key={timeFrame.replace(' ', '').toLowerCase()}
-        checked={this.state.common === timeFrame}
-        onChange={() => this.setState(getStateFromCommonTimeFrame(timeFrame))}
-      >
-        {timeFrame}
-      </Radio>
-      ));
+    const timeFrames = COMMON_TIME_FRAMES.map((timeFrame) => {
+      const nextState = getStateFromCommonTimeFrame(timeFrame);
+      return (
+        <OverlayTrigger
+          key={timeFrame}
+          placement="left"
+          overlay={
+            <Tooltip id={`tooltip-${timeFrame}`}>
+              {nextState.since}<br />{nextState.until}
+            </Tooltip>
+          }
+        >
+          <div>
+            <Radio
+              key={timeFrame.replace(' ', '').toLowerCase()}
+              checked={this.state.common === timeFrame}
+              onChange={() => this.setState(nextState)}
+            >
+              {timeFrame}
+            </Radio>
+          </div>
+        </OverlayTrigger>
+      );
+    });
     return (
       <Popover id="filter-popover" placement="top" positionTop={0}>
         <div style={{ width: '250px' }}>