fix(templates): render env var description as tooltip in app templates [BE-13057] (#2903)

Co-authored-by: Rian <rian.moraes@smigroup.com.br>

app/react/portainer/templates/app-templates/DeployFormWidget/EnvVarsFieldset.test.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { vi } from 'vitest';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
@@ -8,6 +9,15 @@ import {
   envVarsFieldsetValidation,
 } from './EnvVarsFieldset';
 
+// Tippy renders tooltip content in a portal which is not accessible without
+// user interaction in jsdom. Mock Tooltip to render its message inline so
+// tests can assert on the message text.
+vi.mock('@@/Tip/Tooltip/Tooltip', () => ({
+  Tooltip: ({ message }: { message: ReactNode }) => (
+    <span data-cy="tooltip">{message}</span>
+  ),
+}));
+
 test('renders EnvVarsFieldset component', () => {
   const onChange = vi.fn();
   const options = [
@@ -34,6 +44,49 @@ test('renders EnvVarsFieldset component', () => {
   });
 });
 
+test('renders the env var description as a tooltip', () => {
+  const onChange = vi.fn();
+  const options = [
+    {
+      name: 'VAR1',
+      label: 'Variable 1',
+      description: 'Helpful description for variable 1',
+      preset: false,
+    },
+  ];
+  const value = { VAR1: 'Value 1' };
+
+  render(
+    <EnvVarsFieldset
+      onChange={onChange}
+      options={options}
+      values={value}
+      errors={{}}
+    />
+  );
+
+  expect(
+    screen.getByText('Helpful description for variable 1')
+  ).toBeInTheDocument();
+});
+
+test('does not render a tooltip when the env var has no description', () => {
+  const onChange = vi.fn();
+  const options = [{ name: 'VAR1', label: 'Variable 1', preset: false }];
+  const value = { VAR1: 'Value 1' };
+
+  render(
+    <EnvVarsFieldset
+      onChange={onChange}
+      options={options}
+      values={value}
+      errors={{}}
+    />
+  );
+
+  expect(screen.queryByTestId('tooltip')).not.toBeInTheDocument();
+});
+
 test('calls onChange when input value changes', async () => {
   const user = userEvent.setup();
   const onChange = vi.fn();

app/react/portainer/templates/app-templates/DeployFormWidget/EnvVarsFieldset.tsx

@@ -55,6 +55,7 @@ function Item({
   return (
     <FormControl
       label={option.label || option.name}
+      tooltip={option.description}
       required={false}
       errors={errors}
       inputId={inputId}