Fix tooltip bugs
This commit is contained in:
parent
6398a01852
commit
c6eafbb8d5
16 changed files with 339 additions and 235 deletions
81
ts/components/Tooltip.tsx
Normal file
81
ts/components/Tooltip.tsx
Normal file
|
@ -0,0 +1,81 @@
|
|||
// Copyright 2020 Signal Messenger, LLC
|
||||
// SPDX-License-Identifier: AGPL-3.0-only
|
||||
|
||||
import React from 'react';
|
||||
import { Manager, Reference, Popper } from 'react-popper';
|
||||
|
||||
export enum TooltipPlacement {
|
||||
Top = 'top',
|
||||
Right = 'right',
|
||||
Bottom = 'bottom',
|
||||
Left = 'left',
|
||||
}
|
||||
|
||||
export type PropsType = {
|
||||
content: string | JSX.Element;
|
||||
direction?: TooltipPlacement;
|
||||
sticky?: boolean;
|
||||
};
|
||||
|
||||
export const Tooltip: React.FC<PropsType> = ({
|
||||
children,
|
||||
content,
|
||||
direction,
|
||||
sticky,
|
||||
}) => {
|
||||
const isSticky = Boolean(sticky);
|
||||
const [showTooltip, setShowTooltip] = React.useState(isSticky);
|
||||
|
||||
return (
|
||||
<Manager>
|
||||
<Reference>
|
||||
{({ ref }) => (
|
||||
<span
|
||||
onBlur={() => {
|
||||
if (!isSticky) {
|
||||
setShowTooltip(false);
|
||||
}
|
||||
}}
|
||||
onFocus={() => {
|
||||
if (!isSticky) {
|
||||
setShowTooltip(true);
|
||||
}
|
||||
}}
|
||||
onMouseEnter={() => {
|
||||
if (!isSticky) {
|
||||
setShowTooltip(true);
|
||||
}
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
if (!isSticky) {
|
||||
setShowTooltip(false);
|
||||
}
|
||||
}}
|
||||
ref={ref}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
)}
|
||||
</Reference>
|
||||
<Popper placement={direction}>
|
||||
{({ arrowProps, placement, ref, style }) =>
|
||||
showTooltip && (
|
||||
<div
|
||||
className="module-tooltip"
|
||||
ref={ref}
|
||||
style={style}
|
||||
data-placement={placement}
|
||||
>
|
||||
{content}
|
||||
<div
|
||||
className="module-tooltip-arrow"
|
||||
ref={arrowProps.ref}
|
||||
style={arrowProps.style}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</Popper>
|
||||
</Manager>
|
||||
);
|
||||
};
|
Loading…
Add table
Add a link
Reference in a new issue