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> ); }