Fix "in contacts" tooltip exceeding desired boundary
See [#4907][0]. [0]: https://github.com/signalapp/Signal-Desktop/pull/4907
This commit is contained in:
parent
54974b377a
commit
2cd02855fc
5 changed files with 65 additions and 4 deletions
|
@ -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
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue