e58ddbc809
* Tooltip: add 'followCursor' and 'placement' option When used on a `<span>` with short text but large empty area, the location of the tooltip was at the bottom-center of the area, which isn't ideal. I think 'followCursor' should be the default, but making it optional for now to minimize testing. Also added the 'placement' prop -- for the span case again, the mouse cursor is blocking the tooltip. * View/Follower count: only use compact when > 10k ## Issue Received complaints -- some people prefer to see full resolution. ## Changes - As a compromise, we'll only apply the compact notation when the value is greater than 10k, with the exception of Tile View Count, where we'll always apply it due to space limitation. - Also added Tooltip for Follower count. ## Fixes - The string was always in 'en' locale in some instances, so it wasn't grouping up digits properly in Japanese (groups of 4), for example.
42 lines
853 B
JavaScript
42 lines
853 B
JavaScript
// @flow
|
|
import React from 'react';
|
|
import MUITooltip from '@mui/material/Tooltip';
|
|
import type { Node } from 'react';
|
|
|
|
type Props = {
|
|
arrow?: boolean,
|
|
children: Node,
|
|
disableInteractive?: boolean,
|
|
enterDelay?: number,
|
|
title?: string | Node,
|
|
followCursor?: boolean,
|
|
placement?: string, // https://mui.com/api/tooltip/
|
|
};
|
|
|
|
function Tooltip(props: Props) {
|
|
const {
|
|
arrow = true,
|
|
children,
|
|
disableInteractive = true,
|
|
enterDelay = 300,
|
|
title,
|
|
followCursor = false,
|
|
placement = 'bottom',
|
|
} = props;
|
|
|
|
return (
|
|
<MUITooltip
|
|
arrow={arrow}
|
|
disableInteractive={disableInteractive}
|
|
enterDelay={enterDelay}
|
|
enterNextDelay={enterDelay}
|
|
title={title}
|
|
followCursor={followCursor}
|
|
placement={placement}
|
|
>
|
|
{children}
|
|
</MUITooltip>
|
|
);
|
|
}
|
|
|
|
export default Tooltip;
|