fix(leetcode): instant CSS tooltip on compact badges (was 1-2s native delay) (#7)

Native HTML title="" has a browser-imposed hover delay (~1-2 seconds on
most platforms, longer on touch). For a tight icon strip like the
compact badges row, that's unusable.

Replaced with a data-tip attribute + CSS-only tooltip on .lc-badge-tip:
- 80ms transition delay (instant-feeling, no flicker on quick passes)
- Carbon canvas styling: surface-hi background, border-hi border, mono
  text, soft shadow, downward-pointing caret
- Positioned above the icon, opacity 0→1 on :hover and :focus-visible

Tile variant on /m/:login already showed name + date inline below the
icon, so its now-redundant title= attribute was removed entirely.

Co-authored-by: Truong Le Vinh Phuc <phuc.truong@katalon.com>
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: 3 people

app/globals.css

@@ -1441,6 +1441,53 @@ footer {
   border-radius: var(--r-button);
   background: var(--surface-hi);
   border: 1px solid var(--border);
+  position: relative;
+}
+
+/* CSS-only tooltip for compact badge icons. Native HTML title="" has a
+   browser-imposed ~1-2s hover delay; this fires within ~80ms and matches
+   the rest of the carbon canvas. */
+.lc-badge-tip::after,
+.lc-badge-tip::before {
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 80ms ease-out 80ms;
+  z-index: 10;
+}
+
+.lc-badge-tip::after {
+  content: attr(data-tip);
+  white-space: nowrap;
+  background: var(--surface-hi);
+  color: var(--text-bright);
+  border: 1px solid var(--border-hi);
+  border-radius: var(--r-button);
+  padding: 6px 10px;
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  letter-spacing: -0.1px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+}
+
+.lc-badge-tip::before {
+  content: "";
+  bottom: calc(100% + 2px);
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 6px solid var(--border-hi);
+}
+
+.lc-badge-tip:hover::after,
+.lc-badge-tip:hover::before,
+.lc-badge-tip:focus-visible::after,
+.lc-badge-tip:focus-visible::before {
+  opacity: 1;
 }
 
 .lc-badge img {

components/LeetcodeBadges.tsx

@@ -34,7 +34,11 @@ export default function LeetcodeBadges({ badges, variant = "compact", limit }: P
         </h4>
         <div className="lc-badges" aria-label={`${sorted.length} badges`}>
           {list.map((b) => (
-            <span key={b.id} className="lc-badge" title={`${b.name} · ${b.creationDate}`}>
+            <span
+              key={b.id}
+              className="lc-badge lc-badge-tip"
+              data-tip={`${b.name} · ${b.creationDate}`}
+            >
               <img src={b.icon} alt={b.name} loading="lazy" />
             </span>
           ))}
@@ -68,7 +72,7 @@ export default function LeetcodeBadges({ badges, variant = "compact", limit }: P
           </h4>
           <div className="lc-badges">
             {groups.get(cat)!.map((b) => (
-              <span key={b.id} className="lc-badge lc-badge-tile" title={`${b.name} · ${b.creationDate}`}>
+              <span key={b.id} className="lc-badge lc-badge-tile">
                 <img src={b.icon} alt={b.name} loading="lazy" />
                 <span className="lc-badge-name">{b.name}</span>
                 <span className="lc-badge-date">{b.creationDate}</span>