Use FloatingTooltip from zen.

This commit is contained in:
Mike Cao 2025-03-13 17:52:45 -07:00
parent 556cc1b205
commit a9ba2504d7
9 changed files with 37 additions and 149 deletions

View file

@ -2,7 +2,6 @@ import { useState, useMemo, HTMLAttributes } from 'react';
import { ComposableMap, Geographies, Geography, ZoomableGroup } from 'react-simple-maps';
import classNames from 'classnames';
import { colord } from 'colord';
import { HoverTooltip } from '@/components/common/HoverTooltip';
import { ISO_COUNTRIES, MAP_FILE } from '@/lib/constants';
import { useDateRange, useTheme, useWebsiteMetrics } from '@/components/hooks';
import { useCountryNames } from '@/components/hooks';
@ -11,6 +10,7 @@ import { useMessages } from '@/components/hooks';
import { formatLongNumber } from '@/lib/format';
import { percentFilter } from '@/lib/filters';
import styles from './WorldMap.module.css';
import { FloatingTooltip } from '@umami/react-zen';
export function WorldMap({
websiteId,
@ -104,7 +104,7 @@ export function WorldMap({
</Geographies>
</ZoomableGroup>
</ComposableMap>
{tooltip && <HoverTooltip>{tooltip}</HoverTooltip>}
{tooltip && <FloatingTooltip>{tooltip}</FloatingTooltip>}
</div>
);
}