From 511022b3e907e922e54188ed62f1c721cc0bd7ab Mon Sep 17 00:00:00 2001
From: Prasad Walvekar <prasadwalvekar@users.noreply.github.com>
Date: Fri, 25 Jun 2021 21:28:50 +0530
Subject: [PATCH] Feature: Show tooltip for widgets (#318)

* Show tooltip containing widget description when hovered over a widget

* Refactor import
---
 frontend/src/Editor/Box.jsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/frontend/src/Editor/Box.jsx b/frontend/src/Editor/Box.jsx
index f33061fa2d..05a4e58c7b 100644
--- a/frontend/src/Editor/Box.jsx
+++ b/frontend/src/Editor/Box.jsx
@@ -15,6 +15,8 @@ import { Multiselect } from './Components/Multiselect';
 import { Modal } from './Components/Modal';
 import { Chart } from './Components/Chart';
 import { Map } from './Components/Map';
+import { renderTooltip } from '../_helpers/appUtils';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 
 const AllComponents = {
   Button,
@@ -68,6 +70,10 @@ export const Box = function Box({
   const ComponentToRender = AllComponents[component.component];
 
   return (
+    <OverlayTrigger
+      placement="top"
+      overlay={(props) => renderTooltip({props, text: `${component.description}`})}
+    >
     <div style={{ ...styles, backgroundColor }} role={preview ? 'BoxPreview' : 'Box'}>
       {inCanvas ? (
         <ComponentToRender
@@ -106,5 +112,6 @@ export const Box = function Box({
         </div>
       )}
     </div>
+    </OverlayTrigger>
   );
 };