mirror of https://github.com/portainer/portainer
43 lines
908 B
TypeScript
43 lines
908 B
TypeScript
|
import Tippy from '@tippyjs/react';
|
||
|
|
import clsx from 'clsx';
|
||
|
|
|
||
|
|
import 'tippy.js/dist/tippy.css';
|
||
|
|
|
||
|
|
import styles from './SliderTooltip.module.css';
|
||
|
|
|
||
|
|
export interface Props {
|
||
|
|
value: string;
|
||
|
|
child: React.ReactElement;
|
||
|
|
delay: number;
|
||
|
|
zIndex?: number;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function SliderTooltip({ value, child, delay, zIndex = 50 }: Props) {
|
||
|
|
return (
|
||
|
|
<Tippy
|
||
|
|
appendTo="parent"
|
||
|
|
zIndex={zIndex} // make the z index lower than the dialog
|
||
|
|
className={clsx(styles.tooltipCentered, styles.tooltip)}
|
||
|
|
content={messageHTML(value)}
|
||
|
|
placement="top"
|
||
|
|
showOnCreate
|
||
|
|
hideOnClick={false}
|
||
|
|
trigger="manual"
|
||
|
|
delay={delay}
|
||
|
|
arrow
|
||
|
|
allowHTML
|
||
|
|
>
|
||
|
|
{child}
|
||
|
|
</Tippy>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function messageHTML(value: string) {
|
||
|
|
let message = value;
|
||
|
|
if (message === '0') {
|
||
|
|
message = 'unlimited';
|
||
|
|
}
|
||
|
|
|
||
|
|
return <div className={styles.tooltipContainer}>{message}</div>;
|
||
|
|
}
|