From 99c8c94e47e8ff3b4cb10bb99c24a173b50c0baf Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Tue, 11 Nov 2025 23:03:59 +0000 Subject: [PATCH] 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 | 65 +++++++++++--- .../admin/editors/TechnicalSpecsEditor.tsx | 87 ++++++++++++++++--- 2 files changed, 126 insertions(+), 26 deletions(-) diff --git a/src/components/admin/RideForm.tsx b/src/components/admin/RideForm.tsx index d3a29e0d..47d75f38 100644 --- a/src/components/admin/RideForm.tsx +++ b/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 ( - - - - - {isEditing ? 'Edit Ride' : 'Create New Ride'} - - - -
+ + + + + + {isEditing ? 'Edit Ride' : 'Create New Ride'} + + + + {/* Basic Information */}
@@ -844,7 +846,17 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
- +
+ + + + + + +

Material used for the track. Select multiple if hybrid (e.g., wood track with steel supports).

+ + +

Select all materials used in the track

{TRACK_MATERIALS.map((material) => ( @@ -870,7 +882,17 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
- +
+ + + + + + +

Material used for the support structure. Can be different from track material (e.g., wood track on steel supports).

+ + +

Select all materials used in the supports

{SUPPORT_MATERIALS.map((material) => ( @@ -896,7 +918,23 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }:
- +
+ + + + + + +

Common methods:

+
    +
  • • LSM Launch: Linear Synchronous Motor (smooth, modern)
    • +
  • • Chain Lift: Traditional lift hill
    • +
  • • Hydraulic Launch: Fast, powerful (e.g., Kingda Ka)
    • +
  • • Gravity: Free-fall or terrain-based
    • +
+ + +

Select all propulsion methods used

{PROPULSION_METHODS.map((method) => ( @@ -1602,5 +1640,6 @@ export function RideForm({ onSubmit, onCancel, initialData, isEditing = false }: + ); } \ No newline at end of file diff --git a/src/components/admin/editors/TechnicalSpecsEditor.tsx b/src/components/admin/editors/TechnicalSpecsEditor.tsx index d143c58c..e6050af7 100644 --- a/src/components/admin/editors/TechnicalSpecsEditor.tsx +++ b/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 ( -
-
- - -
+ +
+
+
+ + + + + + +

Add custom specifications like track material (Steel, Wood), propulsion method (LSM Launch, Chain Lift), train type, etc. Use metric units only.

+ + +
+ +
{specs.length === 0 ? ( @@ -145,7 +157,24 @@ export function TechnicalSpecsEditor({
- +
+ + + + + + +

Examples:

+
    +
  • • Track Material (Steel/Wood)
    • +
  • • Propulsion Method (LSM Launch, Chain Lift)
    • +
  • • Train Type (Sit-down, Inverted)
    • +
  • • Restraint System (Lap bar, OTSR)
    • +
  • • Launch Speed (km/h)
    • +
+ + +
updateSpec(index, 'spec_name', e.target.value)} @@ -189,7 +218,22 @@ export function TechnicalSpecsEditor({
- +
+ + + + + + +
    +
  • • Text: Material names, methods (e.g., "Steel", "LSM Launch")
    • +
  • • Number: Measurements with units (e.g., speed, length)
    • +
  • • Yes/No: Features (e.g., "Has VR")
    • +
  • • Date: Installation dates
    • +
+ + +
updateSpec(index, 'unit', e.target.value)} @@ -257,7 +317,8 @@ export function TechnicalSpecsEditor({ ))}
)} -
+
+ ); }