mirror of https://github.com/portainer/portainer
84 lines
1.9 KiB
TypeScript
84 lines
1.9 KiB
TypeScript
import ReactTooltip from 'react-tooltip';
|
|
import clsx from 'clsx';
|
|
import _ from 'lodash';
|
|
import ReactDOMServer from 'react-dom/server';
|
|
|
|
import { FeatureId } from '@/react/portainer/feature-flags/enums';
|
|
|
|
import { getFeatureDetails } from '@@/BEFeatureIndicator/utils';
|
|
|
|
import styles from './TooltipWithChildren.module.css';
|
|
|
|
type Position = 'top' | 'right' | 'bottom' | 'left';
|
|
|
|
export interface Props {
|
|
position?: Position;
|
|
message: string;
|
|
className?: string;
|
|
children: React.ReactNode;
|
|
heading?: string;
|
|
BEFeatureID?: FeatureId;
|
|
}
|
|
|
|
export function TooltipWithChildren({
|
|
message,
|
|
position = 'bottom',
|
|
className,
|
|
children,
|
|
heading,
|
|
BEFeatureID,
|
|
}: Props) {
|
|
const id = _.uniqueId('tooltip-');
|
|
|
|
const { url, limitedToBE } = BEFeatureID
|
|
? getFeatureDetails(BEFeatureID)
|
|
: { url: '', limitedToBE: false };
|
|
|
|
const messageHTML = (
|
|
<div className={styles.tooltipContainer}>
|
|
<div
|
|
className={clsx(
|
|
'w-full mb-2 inline-flex justify-between',
|
|
styles.tooltipHeading
|
|
)}
|
|
>
|
|
{heading && <span>{heading}</span>}
|
|
{BEFeatureID && limitedToBE && (
|
|
<a
|
|
href={url}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className={styles.tooltipBeteaser}
|
|
>
|
|
Business Edition Only
|
|
</a>
|
|
)}
|
|
</div>
|
|
<div>{message}</div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<span
|
|
data-html
|
|
data-multiline
|
|
data-tip={ReactDOMServer.renderToString(messageHTML)}
|
|
data-for={id}
|
|
className={clsx(styles.icon, 'inline-flex text-base')}
|
|
>
|
|
{children}
|
|
<ReactTooltip
|
|
id={id}
|
|
multiline
|
|
type="info"
|
|
place={position}
|
|
effect="solid"
|
|
className={clsx(styles.tooltip, className)}
|
|
arrowColor="var(--bg-tooltip-color)"
|
|
delayHide={400}
|
|
clickable
|
|
/>
|
|
</span>
|
|
);
|
|
}
|