implement #8;

src/components/home/DashboardMode.tsx

@@ -91,7 +91,7 @@ export default function DashboardMode(props: { user: User | null }) {
         ) : (
           <ul role="list" className="divide-y divide-gray-200 space-y-4">
             {allForms.map((f) => {
-              const responsesForThisForm = formIdToResponses[f.id] || [];
+import { Tooltip } from '../misc';
               const badgeColor = f.is_open
                 ? 'bg-green-100 text-green-800'
                 : 'bg-red-100 text-red-800';
@@ -113,8 +113,13 @@ export default function DashboardMode(props: { user: User | null }) {
                       <span
                         className={`inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ${badgeColor} ring-1 ring-inset ring-gray-500/10`}
                       >
-                        {f.is_open ? 'Open' : 'Closed'}
-                      </span>
+<Tooltip message={f.is_open ? 'This form is currently accepting responses' : 'This form is not currently accepting responses'}>
+<span
+  className={`inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ${badgeColor} ring-1 ring-inset ring-gray-500/10`}
+>
+  {f.is_open ? 'Open' : 'Closed'}
+</span>
+</Tooltip>
                     </div>
                     <div className="">
                       {f.created_at && (
@@ -173,4 +178,4 @@ export default function DashboardMode(props: { user: User | null }) {
       </div>
     );
   }
-}
+}

src/components/misc.tsx

@@ -18,3 +18,16 @@ export const titleGradient = 'bg-gradient-to-r from-purple-600 to-blue-400';
 export const titleGradientHover = 'hover:from-purple-500 hover:to-blue-300';
 // const pinkGradient = 'from-yellow-400 via-pink-400 to-fuchsia-500';
 // hover:from-yellow-300 hover:via-pink-300 hover:to-fuchsia-400
+
+import ReactTooltip from 'react-tooltip';
+
+export const Tooltip = ({ message, children }) => (
+  <div>
+    <ReactTooltip id='tooltip' place='top' effect='solid'>
+      {message}
+    </ReactTooltip>
+    <div data-tip data-for='tooltip'>
+      {children}
+    </div>
+  </div>
+);