Migrate help text to tool tips?

[bmaupin]

You’ll see users getting stuck. When you get stuck, you look around. When users get stuck, they narrow their focus. It becomes harder for them to see solutions elsewhere on the screen. It’s one reason why help text is a poor solution to poor user interface design. If you must have instructions or help text, make sure to locate it right next to your problem areas. A user’s narrow focus of attention is why tool tips are more useful than help menus.

https://learning.oreilly.com/library/view/97-things-every/9780596809515/ch03.html https://github.com/97-things/97-things-every-programmer-should-know/tree/master/en/thing_03

[bmaupin]

A tooltip icon per button in the top button group seems like it would clutter the UI; maybe one icon to the right of the button group that can show tooltips on hover?

[bmaupin]

Hmm, I implemented it but I'm not completely happy with the result:

Putting the tooltip to the right of the button group makes them off-center. Putting it inside the far right button fixes this but then it's not really relevant to the context of that specific button. Then there's also the matter of the tooltip popup contains "how the data is calculated" which is relevant to the whole page.

I think rather than make it worse, I'll leave it as-is. Here's the diff in case I ever rethink this:

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 692b982..64aeecb 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -14,44 +14,6 @@ export default function Header() {
         </Menu.Item>

         <Menu.Menu position="right">
-          <Popup
-            on="click"
-            trigger={
-              <Menu.Item icon>
-                <Icon name="help circle" size="big" />
-              </Menu.Item>
-            }
-          >
-            <Popup.Content>
-              <h3>How the data is calculated</h3>
-              <p>
-                First, a base numerical value for a given language and date is
-                calculated by adding the total number of GitHub repositories to
-                the total number of Stack Overflow tags for that language up to
-                that day.
-              </p>
-              <h4>Fastest growth</h4>
-              <p>
-                Languages with the highest percentage change compared to the
-                previous date. Note that scores under a{' '}
-                <a href="https://github.com/bmaupin/langtrends-data/blob/96b8148cc525d129d11a7a2a357429afe0b6ee63/classes/settings.json#L3">
-                  certain threshold
-                </a>{' '}
-                are filtered out to reduce{' '}
-                <a href="https://xkcd.com/1102/">dubious claims</a>.
-              </p>
-              <h4>Most growth</h4>
-              <p>
-                Languages with the highest numerical change compared to the
-                previous date.
-              </p>
-              <h4>Top</h4>
-              <p>
-                Languages with the total highest value for a particular given
-                date.
-              </p>
-            </Popup.Content>
-          </Popup>
           <Menu.Item href="https://github.com/bmaupin/langtrends" icon>
             <Icon name="github" size="big" />
           </Menu.Item>
diff --git a/src/components/TopButtonGroup.tsx b/src/components/TopButtonGroup.tsx
index 3a74e87..a97d9f0 100644
--- a/src/components/TopButtonGroup.tsx
+++ b/src/components/TopButtonGroup.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, ButtonProps } from 'semantic-ui-react';
+import { Button, ButtonProps, Icon, Menu, Popup } from 'semantic-ui-react';

 import './ButtonGroup.css';
 import { ChartType } from '../helpers/ChartFactory';
@@ -14,28 +14,66 @@ export default function TopButtonGroup(props: {
   const chartType = props.chartType;

   return (
-    <Button.Group basic className="button-group">
-      <Button
-        name={ChartType.FastestGrowth}
-        active={chartType === ChartType.FastestGrowth}
-        onClick={props.handleItemClick}
-      >
-        Fastest growth
-      </Button>
-      <Button
-        name={ChartType.MostGrowth}
-        active={chartType === ChartType.MostGrowth}
-        onClick={props.handleItemClick}
-      >
-        Most growth
-      </Button>
-      <Button
-        name={ChartType.TopLanguages}
-        active={chartType === ChartType.TopLanguages}
-        onClick={props.handleItemClick}
-      >
-        Top
-      </Button>
-    </Button.Group>
+    <>
+      <Button.Group basic className="button-group">
+        <Button
+          name={ChartType.FastestGrowth}
+          active={chartType === ChartType.FastestGrowth}
+          onClick={props.handleItemClick}
+        >
+          Fastest growth
+        </Button>
+        <Button
+          name={ChartType.MostGrowth}
+          active={chartType === ChartType.MostGrowth}
+          onClick={props.handleItemClick}
+        >
+          Most growth
+        </Button>
+        <Button
+          name={ChartType.TopLanguages}
+          active={chartType === ChartType.TopLanguages}
+          onClick={props.handleItemClick}
+        >
+          Top
+          <Popup
+            on="hover"
+            trigger={
+              <Icon color="blue" corner="top right" name="info circle" />
+            }
+          >
+            <Popup.Content>
+              <h3>How the data is calculated</h3>
+              <p>
+                First, a base numerical value for a given language and date is
+                calculated by adding the total number of GitHub repositories to
+                the total number of Stack Overflow tags for that language up to
+                that day.
+              </p>
+              <h4>Fastest growth</h4>
+              <p>
+                Languages with the highest percentage change compared to the
+                previous date. Note that scores under a{' '}
+                <a href="https://github.com/bmaupin/langtrends-data/blob/96b8148cc525d129d11a7a2a357429afe0b6ee63/classes/settings.json#L3">
+                  certain threshold
+                </a>{' '}
+                are filtered out to reduce{' '}
+                <a href="https://xkcd.com/1102/">dubious claims</a>.
+              </p>
+              <h4>Most growth</h4>
+              <p>
+                Languages with the highest numerical change compared to the
+                previous date.
+              </p>
+              <h4>Top</h4>
+              <p>
+                Languages with the total highest value for a particular given
+                date.
+              </p>
+            </Popup.Content>
+          </Popup>
+        </Button>
+      </Button.Group>
+    </>
   );
 }