hunk.code_window:         {required && <span className="text-danger">*</span>}
           {tooltip && <Tooltip message={tooltip} />}
         </label>
         <div className={sizeClassChildren(size)}>
           {children}
  
hunk.labels: keep keep keep replace keep keep keep keep
hunk.after_edit:         {tooltip && (
             <Tooltip message={tooltip} setHtmlMessage={setTooltipHtmlMessage} />
           )}
  
hunk.file_path: app/react/components/form-components/FormControl/FormControl.tsx
hunk.type: replace
file: :global(portainer-tooltip) {
    @apply inline-flex;
  }
  
  .tooltip {
    background-color: var(--bg-tooltip-color) !important;
    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;
    font-size: 1rem !important;
    text-align: left;
    font-weight: 400;
  }
  
  .tooltip:hover {
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  .tooltip-container {
    line-height: 18px;
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
  
  .tooltip-heading {
    font-weight: 500;
  }
  
  .tooltip-beteaser {
    color: var(--ui-warning-5);
  }
  
  .tooltip-beteaser:hover {
    color: var(--ui-warning-5);
  }
  