mirror of https://github.com/portainer/portainer
41 lines
1.0 KiB
TypeScript
41 lines
1.0 KiB
TypeScript
import { HelpCircle } from 'lucide-react';
|
|
import { ReactNode, useMemo } from 'react';
|
|
import sanitize from 'sanitize-html';
|
|
|
|
import { TooltipWithChildren, Position } from '../TooltipWithChildren';
|
|
|
|
export interface Props {
|
|
position?: Position;
|
|
message: ReactNode;
|
|
className?: string;
|
|
setHtmlMessage?: boolean;
|
|
}
|
|
|
|
export function Tooltip({
|
|
message,
|
|
position = 'bottom',
|
|
className,
|
|
setHtmlMessage,
|
|
}: 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 (
|
|
<TooltipWithChildren
|
|
message={htmlMessage || message}
|
|
position={position}
|
|
className={className}
|
|
>
|
|
<span className="inline-flex text-base">
|
|
<HelpCircle className="lucide ml-1" aria-hidden="true" />
|
|
</span>
|
|
</TooltipWithChildren>
|
|
);
|
|
}
|