Added HoverTooltip component. Removed react-tooltip.

components/common/HoverTooltip.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+import { Tooltip } from 'react-basics';
+import styles from './HoverTooltip.module.css';
+
+export default function HoverTooltip({ tooltip }) {
+  const [position, setPosition] = useState({ x: -1000, y: -1000 });
+
+  useEffect(() => {
+    const handler = e => {
+      setPosition({ x: e.clientX, y: e.clientY });
+    };
+
+    document.addEventListener('mousemove', handler);
+
+    return () => {
+      document.removeEventListener('mousemove', handler);
+    };
+  }, []);
+
+  return (
+    <div className={styles.tooltip} style={{ left: position.x, top: position.y }}>
+      <Tooltip position="top" action="none" label={tooltip} />
+    </div>
+  );
+}

components/common/HoverTooltip.module.css

@@ -0,0 +1,43 @@
+.chart {
+  position: relative;
+}
+
+.tooltip {
+  position: fixed;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.title {
+  font-size: var(--font-size-xs);
+  font-weight: 600;
+}
+
+.metric {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: var(--font-size-sm);
+  font-weight: 600;
+}
+
+.dot {
+  position: relative;
+  overflow: hidden;
+  border-radius: 100%;
+  margin-right: 8px;
+  background: var(--base50);
+}
+
+.color {
+  width: 10px;
+  height: 10px;
+}

components/common/WorldMap.js

@@ -1,6 +1,5 @@
 import { useState, useMemo } from 'react';
 import { useRouter } from 'next/router';
-import ReactTooltip from 'react-tooltip';
 import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
 import classNames from 'classnames';
 import { colord } from 'colord';
@@ -9,6 +8,8 @@ import { ISO_COUNTRIES, THEME_COLORS, MAP_FILE } from 'lib/constants';
 import styles from './WorldMap.module.css';
 import useCountryNames from 'hooks/useCountryNames';
 import useLocale from 'hooks/useLocale';
+import HoverTooltip from './HoverTooltip';
+import { formatLongNumber } from '../../lib/format';
 
 function WorldMap({ data, className }) {
   const { basePath } = useRouter();
@@ -46,7 +47,7 @@ function WorldMap({ data, className }) {
   function handleHover(code) {
     if (code === 'AQ') return;
     const country = data?.find(({ x }) => x === code);
-    setTooltip(`${countryNames[code]}: ${country?.y || 0} visitors`);
+    setTooltip(`${countryNames[code]}: ${formatLongNumber(country?.y || 0)} visitors`);
   }
 
   return (
@@ -83,7 +84,7 @@ function WorldMap({ data, className }) {
           </Geographies>
         </ZoomableGroup>
       </ComposableMap>
-      <ReactTooltip id="world-map-tooltip">{tooltip}</ReactTooltip>
+      {tooltip && <HoverTooltip tooltip={tooltip} />}
     </div>
   );
 }