Add tooltips to technical specs editor

Enhance TechnicalSpecsEditor and related ride form fields with contextual tooltips and example guidance for track materials, propulsion methods, and other spec fields to improve user understanding of expected values. Changes include importing tooltip components, adding informative tooltips for specification name, type, unit, track/material categories (e.g., track materials, propulsion methods), and updating UI to display examples inline.

src/components/admin/RideForm.tsx

@@ -21,9 +21,10 @@ import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } f
 import { Combobox } from '@/components/ui/combobox';
 import { SlugField } from '@/components/ui/slug-field';
 import { Checkbox } from '@/components/ui/checkbox';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { toast } from '@/hooks/use-toast';
 import { handleError } from '@/lib/errorHandler';
-import { Plus, Zap, Save, X, Building2, AlertCircle, Info } from 'lucide-react';
+import { Plus, Zap, Save, X, Building2, AlertCircle, Info, HelpCircle } from 'lucide-react';
 import { toDateOnly, parseDateOnly, toDateWithPrecision } from '@/lib/dateUtils';
 import { useUnitPreferences } from '@/hooks/useUnitPreferences';
 import { useManufacturers, useRideModels, useParks } from '@/hooks/useAutocompleteData';
@@ -381,15 +382,16 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
   };
 
   return (
-    <Card className="w-full max-w-4xl mx-auto">
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <Zap className="w-5 h-5" />
-          {isEditing ? 'Edit Ride' : 'Create New Ride'}
-        </CardTitle>
-      </CardHeader>
-      <CardContent>
-        <form onSubmit={handleSubmit(handleFormSubmit)} className="space-y-6">
+    <TooltipProvider>
+      <Card className="w-full max-w-4xl mx-auto">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Zap className="w-5 h-5" />
+            {isEditing ? 'Edit Ride' : 'Create New Ride'}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit(handleFormSubmit)} className="space-y-6">
           {/* Basic Information */}
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
             <div className="space-y-2">
@@ -844,7 +846,17 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
                 </div>
 
                 <div className="space-y-3">
-                  <Label>Track Material(s)</Label>
+                  <div className="flex items-center gap-2">
+                    <Label>Track Material(s)</Label>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <HelpCircle className="h-4 w-4 text-muted-foreground cursor-help" />
+                      </TooltipTrigger>
+                      <TooltipContent className="max-w-xs">
+                        <p>Material used for the track. Select multiple if hybrid (e.g., wood track with steel supports).</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
                   <p className="text-sm text-muted-foreground">Select all materials used in the track</p>
                   <div className="grid grid-cols-2 gap-3">
                     {TRACK_MATERIALS.map((material) => (
@@ -870,7 +882,17 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
                 </div>
 
                 <div className="space-y-3">
-                  <Label>Support Material(s)</Label>
+                  <div className="flex items-center gap-2">
+                    <Label>Support Material(s)</Label>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <HelpCircle className="h-4 w-4 text-muted-foreground cursor-help" />
+                      </TooltipTrigger>
+                      <TooltipContent className="max-w-xs">
+                        <p>Material used for the support structure. Can be different from track material (e.g., wood track on steel supports).</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
                   <p className="text-sm text-muted-foreground">Select all materials used in the supports</p>
                   <div className="grid grid-cols-2 gap-3">
                     {SUPPORT_MATERIALS.map((material) => (
@@ -896,7 +918,23 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
                 </div>
 
                 <div className="space-y-3">
-                  <Label>Propulsion Method(s)</Label>
+                  <div className="flex items-center gap-2">
+                    <Label>Propulsion Method(s)</Label>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <HelpCircle className="h-4 w-4 text-muted-foreground cursor-help" />
+                      </TooltipTrigger>
+                      <TooltipContent className="max-w-xs">
+                        <p className="font-semibold mb-1">Common methods:</p>
+                        <ul className="text-xs space-y-1">
+                          <li>• <strong>LSM Launch:</strong> Linear Synchronous Motor (smooth, modern)</li>
+                          <li>• <strong>Chain Lift:</strong> Traditional lift hill</li>
+                          <li>• <strong>Hydraulic Launch:</strong> Fast, powerful (e.g., Kingda Ka)</li>
+                          <li>• <strong>Gravity:</strong> Free-fall or terrain-based</li>
+                        </ul>
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
                   <p className="text-sm text-muted-foreground">Select all propulsion methods used</p>
                   <div className="grid grid-cols-2 gap-3">
                     {PROPULSION_METHODS.map((method) => (
@@ -1602,5 +1640,6 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
         </Dialog>
       </CardContent>
     </Card>
+    </TooltipProvider>
   );
 }

src/components/admin/editors/TechnicalSpecsEditor.tsx

@@ -1,10 +1,11 @@
-import { Plus, Trash2 } from "lucide-react";
+import { Plus, Trash2, HelpCircle } from "lucide-react";
 import { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Card } from "@/components/ui/card";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { useUnitPreferences } from "@/hooks/useUnitPreferences";
 import { toast } from "sonner";
 import { 
@@ -126,14 +127,25 @@ export function TechnicalSpecsEditor({
   };
 
   return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <Label>Technical Specifications</Label>
-        <Button type="button" variant="outline" size="sm" onClick={addSpec}>
-          <Plus className="h-4 w-4 mr-2" />
-          Add Specification
-        </Button>
-      </div>
+    <TooltipProvider>
+      <div className="space-y-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <Label>Technical Specifications</Label>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <HelpCircle className="h-4 w-4 text-muted-foreground cursor-help" />
+              </TooltipTrigger>
+              <TooltipContent className="max-w-xs">
+                <p>Add custom specifications like track material (Steel, Wood), propulsion method (LSM Launch, Chain Lift), train type, etc. Use metric units only.</p>
+              </TooltipContent>
+            </Tooltip>
+          </div>
+          <Button type="button" variant="outline" size="sm" onClick={addSpec}>
+            <Plus className="h-4 w-4 mr-2" />
+            Add Specification
+          </Button>
+        </div>
 
       {specs.length === 0 ? (
         <Card className="p-6 text-center text-muted-foreground">
@@ -145,7 +157,24 @@ export function TechnicalSpecsEditor({
             <Card key={index} className="p-4">
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-3">
                 <div className="lg:col-span-2">
-                  <Label className="text-xs">Specification Name</Label>
+                  <div className="flex items-center gap-1">
+                    <Label className="text-xs">Specification Name</Label>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <HelpCircle className="h-3 w-3 text-muted-foreground cursor-help" />
+                      </TooltipTrigger>
+                      <TooltipContent className="max-w-xs">
+                        <p className="font-semibold mb-1">Examples:</p>
+                        <ul className="text-xs space-y-1">
+                          <li>• Track Material (Steel/Wood)</li>
+                          <li>• Propulsion Method (LSM Launch, Chain Lift)</li>
+                          <li>• Train Type (Sit-down, Inverted)</li>
+                          <li>• Restraint System (Lap bar, OTSR)</li>
+                          <li>• Launch Speed (km/h)</li>
+                        </ul>
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
                   <Input
                     value={spec.spec_name}
                     onChange={(e) => updateSpec(index, 'spec_name', e.target.value)}
@@ -189,7 +218,22 @@ export function TechnicalSpecsEditor({
                 </div>
 
                 <div>
-                  <Label className="text-xs">Type</Label>
+                  <div className="flex items-center gap-1">
+                    <Label className="text-xs">Type</Label>
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <HelpCircle className="h-3 w-3 text-muted-foreground cursor-help" />
+                      </TooltipTrigger>
+                      <TooltipContent className="max-w-xs">
+                        <ul className="text-xs space-y-1">
+                          <li>• <strong>Text:</strong> Material names, methods (e.g., "Steel", "LSM Launch")</li>
+                          <li>• <strong>Number:</strong> Measurements with units (e.g., speed, length)</li>
+                          <li>• <strong>Yes/No:</strong> Features (e.g., "Has VR")</li>
+                          <li>• <strong>Date:</strong> Installation dates</li>
+                        </ul>
+                      </TooltipContent>
+                    </Tooltip>
+                  </div>
                   <Select
                     value={spec.spec_type}
                     onValueChange={(value) => updateSpec(index, 'spec_type', value)}
@@ -225,7 +269,23 @@ export function TechnicalSpecsEditor({
 
                 <div className="flex items-end gap-2">
                   <div className="flex-1">
-                    <Label className="text-xs">Unit</Label>
+                    <div className="flex items-center gap-1">
+                      <Label className="text-xs">Unit</Label>
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <HelpCircle className="h-3 w-3 text-muted-foreground cursor-help" />
+                        </TooltipTrigger>
+                        <TooltipContent className="max-w-xs">
+                          <p className="font-semibold mb-1">Metric units only:</p>
+                          <ul className="text-xs space-y-1">
+                            <li>• Speed: km/h (not mph)</li>
+                            <li>• Distance: m, km, cm (not ft, mi, in)</li>
+                            <li>• Weight: kg, g (not lb, oz)</li>
+                            <li>• Leave empty for text values</li>
+                          </ul>
+                        </TooltipContent>
+                      </Tooltip>
+                    </div>
                     <Input
                       value={spec.unit || ''}
                       onChange={(e) => updateSpec(index, 'unit', e.target.value)}
@@ -257,7 +317,8 @@ export function TechnicalSpecsEditor({
           ))}
         </div>
       )}
-    </div>
+      </div>
+    </TooltipProvider>
   );
 }