feat(frontend): add more tooltips (#2961)

* feat(frontend): add more tooltips

* fix: remove styling from Tooltip

* refactor: tooltip expects a single child
This commit is contained in:
TheCatLady
2022-08-21 22:37:22 -07:00
committed by GitHub
parent 43a9067976
commit 950b1712b7
10 changed files with 191 additions and 112 deletions

View File

@@ -1,29 +1,31 @@
import React from 'react';
import type { Config } from 'react-popper-tooltip';
import { usePopperTooltip } from 'react-popper-tooltip';
type TooltipProps = {
content: React.ReactNode;
children: React.ReactNode;
tooltipConfig?: Config;
children: React.ReactElement;
tooltipConfig?: Partial<Config>;
};
const Tooltip = ({ children, content, tooltipConfig }: TooltipProps) => {
const { getTooltipProps, setTooltipRef, setTriggerRef, visible } =
usePopperTooltip({
followCursor: true,
placement: 'left-end',
offset: [-28, 6],
placement: 'auto-end',
...tooltipConfig,
});
return (
<>
<div ref={setTriggerRef}>{children}</div>
{React.cloneElement(children, { ref: setTriggerRef })}
{visible && (
<div
ref={setTooltipRef}
{...getTooltipProps({
className:
'bg-gray-800 px-2 py-1 rounded border border-gray-600 shadow text-gray-100',
'z-50 text-sm font-normal bg-gray-800 px-2 py-1 rounded border border-gray-600 shadow text-gray-100',
})}
>
{content}