Add better help tooltips to column headers

packages/upset/src/components/Header/AttributeButton.tsx

@@ -19,6 +19,12 @@ type Props = {
    * Text to display on the attribute button
    */
   label: string;
+  /**
+   * Text to display on the attribute button tooltip.
+   * Optional, defaults to label
+   * HTML will be rendered in the tooltip
+   */
+  tooltip?: string;
 };
 
 /**
@@ -30,7 +36,7 @@ type Props = {
  *   <AttributeButton label="Name" />
  * )
  */
-export const AttributeButton: FC<Props> = ({ label }) => {
+export const AttributeButton: FC<Props> = ({ label, tooltip }) => {
   const dimensions = useRecoilValue(dimensionsSelector);
   const { actions } = useContext(
     ProvenanceContext,
@@ -147,7 +153,7 @@ export const AttributeButton: FC<Props> = ({ label }) => {
   };
 
   return (
-    <Tooltip title={label} arrow placement="top">
+    <Tooltip title={<div dangerouslySetInnerHTML={{ __html: tooltip ?? label }} />} arrow placement="top">
       <g
         css={{
           '&:hover': {

packages/upset/src/components/Header/DegreeHeader.tsx

@@ -89,7 +89,7 @@ export const DegreeHeader = () => {
       )}
 
     >
-      <Tooltip title="Degree" arrow placement="top">
+      <Tooltip title="Number of intersecting sets" arrow placement="top">
         <g
           className="degree-button"
           css={css`

packages/upset/src/components/Header/DeviationHeader.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useRecoilValue } from 'recoil';
 
 import { dimensionsSelector } from '../../atoms/dimensionsAtom';
@@ -13,7 +12,10 @@ export const DeviationHeader = () => {
 
   return (
     <g>
-      <AttributeButton label="Deviation" />
+      <AttributeButton
+        label="Deviation"
+        tooltip='Measure for how "surprising" the size of an intersection is. This also considers the size of the sets. For more information visit <a href="https://upset.app/advanced/">https://upset.app/advanced/</a>'
+      />
       <g
         transform={translate(
           0,

packages/upset/src/components/Header/SizeHeader.tsx

@@ -6,6 +6,7 @@ import {
 } from 'react';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 
+import { Tooltip } from '@mui/material';
 import { sortByOrderSelector, sortBySelector } from '../../atoms/config/sortByAtom';
 import { dimensionsSelector } from '../../atoms/dimensionsAtom';
 import { itemsAtom } from '../../atoms/itemsAtoms';
@@ -103,7 +104,7 @@ export const SizeHeader: FC = () => {
 
   /**
    * Updates the scale of the header based on the largest subset as long as the advanced scale slider hasn't taken
-   * control and set a value 
+   * control and set a value
    */
   useEffect(() => {
     if (advancedScale) return;
@@ -226,55 +227,57 @@ export const SizeHeader: FC = () => {
             2 * dimensions.size.gap} H ${dimensions.attribute.width} z`}
         />
       </g>
-      <g
-        className="size-button"
-        css={css`
+      <Tooltip title="Size (cardinality)" arrow placement="top">
+        <g
+          className="size-button"
+          css={css`
           ${sliding ? hide : show};
           cursor: context-menu;
           &:hover {
             opacity: 0.7;
             transition: opacity 0s;
-          }
-        `}
-        transform={translate(
-          0,
-          dimensions.size.scaleHeight + dimensions.size.gap,
-        )}
-        onContextMenu={(e: any) => {
-          e.preventDefault();
-          e.stopPropagation();
-          openContextMenu(e);
-        }}
-        onClick={handleOnClick}
-      >
-        <rect
-          fill="#ccc"
-          stroke="#000"
-          opacity="0.5"
-          strokeWidth="0.3px"
-          height={dimensions.size.buttonHeight}
-          width={dimensions.attribute.width}
-        />
-        <g
+            }
+            `}
           transform={translate(
-            dimensions.attribute.width / 2,
-            dimensions.size.buttonHeight / 2,
+            0,
+            dimensions.size.scaleHeight + dimensions.size.gap,
           )}
+          onContextMenu={(e: any) => {
+            e.preventDefault();
+            e.stopPropagation();
+            openContextMenu(e);
+          }}
+          onClick={handleOnClick}
         >
-          <text
-            id="header-text"
-            css={css`
-              pointer-event: none;
-            `}
-            dominantBaseline="middle"
-            textAnchor="middle"
+          <rect
+            fill="#ccc"
+            stroke="#000"
+            opacity="0.5"
+            strokeWidth="0.3px"
+            height={dimensions.size.buttonHeight}
+            width={dimensions.attribute.width}
+          />
+          <g
+            transform={translate(
+              dimensions.attribute.width / 2,
+              dimensions.size.buttonHeight / 2,
+            )}
           >
-            Size
-          </text>
-          { sortBy === 'Size' &&
+            <text
+              id="header-text"
+              css={css`
+              pointer-event: none;
+              `}
+              dominantBaseline="middle"
+              textAnchor="middle"
+            >
+              Size
+            </text>
+            { sortBy === 'Size' &&
             <HeaderSortArrow />}
+          </g>
         </g>
-      </g>
+      </Tooltip>
       <g
         className="details-scale"
         transform={translate(