mirror of https://github.com/portainer/portainer
54 lines
1.3 KiB
TypeScript
54 lines
1.3 KiB
TypeScript
import { HelpCircle } from 'lucide-react';
|
|
import { ReactNode, useMemo } from 'react';
|
|
import sanitize from 'sanitize-html';
|
|
import clsx from 'clsx';
|
|
|
|
import { TooltipWithChildren, Position } from '../TooltipWithChildren';
|
|
|
|
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
|
|
|
|
const sizeClasses: Record<Size, string> = {
|
|
xs: 'text-xs',
|
|
sm: 'text-sm',
|
|
md: 'text-base',
|
|
lg: 'text-lg',
|
|
xl: 'text-xl',
|
|
};
|
|
|
|
export interface Props {
|
|
position?: Position;
|
|
message: ReactNode;
|
|
className?: string;
|
|
setHtmlMessage?: boolean;
|
|
size?: Size;
|
|
}
|
|
|
|
export function Tooltip({
|
|
message,
|
|
position = 'bottom',
|
|
className,
|
|
setHtmlMessage,
|
|
size = 'md',
|
|
}: Props) {
|
|
// allow angular views to set html messages for the tooltip
|
|
const htmlMessage = useMemo(() => {
|
|
if (setHtmlMessage && typeof message === 'string') {
|
|
// eslint-disable-next-line react/no-danger
|
|
return <div dangerouslySetInnerHTML={{ __html: sanitize(message) }} />;
|
|
}
|
|
return null;
|
|
}, [setHtmlMessage, message]);
|
|
|
|
return (
|
|
<span className={clsx('ml-1 inline-flex items-center', sizeClasses[size])}>
|
|
<TooltipWithChildren
|
|
message={htmlMessage || message}
|
|
position={position}
|
|
className={className}
|
|
>
|
|
<HelpCircle className="lucide" aria-hidden="true" />
|
|
</TooltipWithChildren>
|
|
</span>
|
|
);
|
|
}
|