Fix "in contacts" tooltip exceeding desired boundary

See [#4907][0].

[0]: https://github.com/signalapp/Signal-Desktop/pull/4907
This commit is contained in:
Will Golledge 2021-10-18 17:10:22 -05:00 committed by Evan Hahn
parent 54974b377a
commit 2cd02855fc
5 changed files with 65 additions and 4 deletions

View file

@ -5,6 +5,7 @@ import React from 'react';
import classNames from 'classnames';
import { noop } from 'lodash';
import { Manager, Reference, Popper } from 'react-popper';
import type { StrictModifiers } from '@popperjs/core';
import { Theme, themeClassName } from '../util/theme';
import { refMerger } from '../util/refMerger';
import { offsetDistanceModifier } from '../util/popperUtil';
@ -70,6 +71,7 @@ export type PropsType = {
content: string | JSX.Element;
className?: string;
direction?: TooltipPlacement;
popperModifiers?: Array<StrictModifiers>;
sticky?: boolean;
theme?: Theme;
};
@ -81,6 +83,7 @@ export const Tooltip: React.FC<PropsType> = ({
direction,
sticky,
theme,
popperModifiers = [],
}) => {
const [isHovering, setIsHovering] = React.useState(false);
@ -99,7 +102,10 @@ export const Tooltip: React.FC<PropsType> = ({
</TooltipEventWrapper>
)}
</Reference>
<Popper placement={direction} modifiers={[offsetDistanceModifier(12)]}>
<Popper
placement={direction}
modifiers={[offsetDistanceModifier(12), ...popperModifiers]}
>
{({ arrowProps, placement, ref, style }) =>
showTooltip && (
<div