SubTasks
Stack: React / TypeScript (Frontend)
Why it fits you: This is a classic UI enhancement. It requires touching the widget property pane and the React component, which is perfect for your MERN skills.
Implementation Logic:
Property Pane Update: Locate the SwitchWidget configuration file (usually in app/client/src/widgets/SwitchWidget/widget/index.tsx). You need to add a new property called tooltip to the propertyPaneConfig array so the setting appears in the Appsmith editor UI.
Component Update: Go to the underlying SwitchComponent. Appsmith likely uses a shared design system component (like BlueprintJS or their own Design System). Wrap the actual Switch HTML/React element with the existing component.
Conditional Rendering: Pass props.tooltip to the Tooltip wrapper. Ensure you add a check: if the tooltip string is empty or undefined, either don't render the Tooltip wrapper or disable it, so an empty black box doesn't appear on hover.
SubTasks
Stack: React / TypeScript (Frontend)
Why it fits you: This is a classic UI enhancement. It requires touching the widget property pane and the React component, which is perfect for your MERN skills.
Implementation Logic:
Property Pane Update: Locate the SwitchWidget configuration file (usually in app/client/src/widgets/SwitchWidget/widget/index.tsx). You need to add a new property called tooltip to the propertyPaneConfig array so the setting appears in the Appsmith editor UI.
Component Update: Go to the underlying SwitchComponent. Appsmith likely uses a shared design system component (like BlueprintJS or their own Design System). Wrap the actual Switch HTML/React element with the existing component.
Conditional Rendering: Pass props.tooltip to the Tooltip wrapper. Ensure you add a check: if the tooltip string is empty or undefined, either don't render the Tooltip wrapper or disable it, so an empty black box doesn't appear on hover.