feat(UI): tooltip html message support and width fix [EE-3445] (#8165)

Co-authored-by: testa113 <testa113>

app/react/components/Tip/TooltipWithChildren/TooltipWithChildren.module.css

@@ -7,10 +7,11 @@
   color: var(--text-tooltip-color) !important;
   border-radius: 10px !important;
   box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15) !important;
-  min-width: 300px;
+  min-width: 50px;
   font-size: 1rem !important;
   text-align: left;
   font-weight: 400;
+  width: max-content;
 }
 
 .tooltip:hover {

app/react/components/form-components/FormControl/FormControl.tsx

@@ -15,6 +15,7 @@ export interface Props {
   children: ReactNode;
   errors?: ReactNode;
   required?: boolean;
+  setTooltipHtmlMessage?: boolean;
 }
 
 export function FormControl({
@@ -25,6 +26,7 @@ export function FormControl({
   children,
   errors,
   required,
+  setTooltipHtmlMessage,
 }: PropsWithChildren<Props>) {
   return (
     <div
@@ -41,7 +43,9 @@ export function FormControl({
 
         {required && <span className="text-danger">*</span>}
 
-        {tooltip && <Tooltip message={tooltip} />}
+        {tooltip && (
+          <Tooltip message={tooltip} setHtmlMessage={setTooltipHtmlMessage} />
+        )}
       </label>
 
       <div className={sizeClassChildren(size)}>

app/react/portainer/settings/EdgeComputeView/SettingsOpenAMT/SettingsOpenAMT.tsx

@@ -214,6 +214,7 @@ export function SettingsOpenAMT({ settings, onSubmit }: Props) {
                       size="medium"
                       tooltip="Supported CAs are Comodo, DigiCert, Entrust and GoDaddy.<br>The certificate must contain the private key.<br>On AMT 15 based devices you need to use SHA2."
                       errors={errors.certFileContent}
+                      setTooltipHtmlMessage
                     >
                       <FileUploadField
                         inputId="certificate_file"