refactor(compare): row-label help uses InfoPopover, not native title

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

nextjs-app/components/compare/compareSections.module.css

@@ -132,20 +132,6 @@
   color: var(--text-secondary);
 }
 
-.help {
-  display: inline-flex;
-  width: 15px;
-  height: 15px;
-  border-radius: 50%;
-  border: 1px solid var(--text-muted);
-  color: var(--text-muted);
-  font-size: 0.65rem;
-  align-items: center;
-  justify-content: center;
-  cursor: help;
-  flex: none;
-}
-
 .badge {
   display: inline-block;
   font-weight: 700;

nextjs-app/components/compare/sectionShared.tsx

@@ -11,6 +11,7 @@ import type { CSSProperties, ReactNode } from 'react';
 
 import type { School } from '@/lib/types';
 import { CHART_COLORS, CHART_TEXT_COLORS, shortName } from '@/lib/utils';
+import { InfoPopover } from '@/components/InfoPopover';
 import styles from './compareSections.module.css';
 
 export function Section({
@@ -52,11 +53,7 @@ export function RowLabel({ children, tip }: { children: ReactNode; tip?: string
   return (
     <div className={styles.rowLabel}>
       {children}
-      {tip && (
-        <span className={styles.help} title={tip} aria-label={tip}>
-          ?
-        </span>
-      )}
+      {tip && <InfoPopover plain={tip} />}
     </div>
   );
 }