gs tooltip Implementation

example/lib/home.dart

@@ -188,8 +188,8 @@ class _HomePageState extends State<HomePage> {
                   routePath: "/navigation-rail-preview",
                 ),
                  const NavButton(
-                  title: "GS Slider",
-                  routePath: "/slider-example",
+                  title: "GS ToolTip",
+                  routePath: "/toolTip-example",
                 ),
 
                 // // ===== Internal Testing Widgets =====

example/lib/routes/router.dart

@@ -3,7 +3,7 @@ import 'package:gluestack_ui_example/home.dart';
 import 'package:gluestack_ui_example/widgets/components/widgets/accordian_example.dart';
 import 'package:gluestack_ui_example/widgets/components/widgets/bottom_sheet_example.dart';
 import 'package:gluestack_ui_example/widgets/components/widgets/navigation_rail_example.dart';
-import 'package:gluestack_ui_example/widgets/components/widgets/slider_example.dart';
+import 'package:gluestack_ui_example/widgets/components/widgets/tool_tip_example.dart';
 import 'package:gluestack_ui_example/widgets/storybook/storybook.dart';
 import 'package:gluestack_ui_example/widgets/storybook/storybook_wrapper.dart';
 import 'package:gluestack_ui_example/widgets/storybook/widgets/accordion_default_value_preview.dart';
@@ -194,9 +194,9 @@ final GoRouter router = GoRouter(
           path: "navigation-rail-preview",
           builder: (context, state) => const NavigationRailExample(),
         ),
-        GoRoute(
-          path: "slider-example",
-          builder: (context, state) => const SliderExample(),
+          GoRoute(
+          path: "toolTip-example",
+          builder: (context, state) => const ToolTipExample(),
         ),
 
         // Generate individual Storybook screens for every widget. This is referenced in docs website iframe.

example/lib/widgets/components/widgets/tool_tip_example.dart

@@ -0,0 +1,95 @@
+import 'package:gluestack_ui/gluestack_ui.dart';
+import 'package:gluestack_ui_example/widgets/components/layout/base_layout.dart';
+import 'package:gluestack_ui_example/widgets/components/layout/custom_gs_layout.dart';
+import 'package:gluestack_ui_example/widgets/components/layout/drop_down.dart';
+import 'package:gluestack_ui_example/widgets/components/layout/toggle.dart';
+
+class ToolTipExample extends StatefulWidget {
+  const ToolTipExample({super.key});
+
+  @override
+  State<ToolTipExample> createState() => _ToolTipExampleState();
+}
+
+class _ToolTipExampleState extends State<ToolTipExample> {
+  bool enableNotch = false;
+  final List dropdownPlacementOptions = [
+    GSTooltipPosition.top,
+    GSTooltipPosition.left,
+    GSTooltipPosition.right,
+    GSTooltipPosition.bottom
+  ];
+  GSTooltipPosition selectedPlacementOption = GSTooltipPosition.top;
+  void updatePlacementSelectedOption(dynamic newOption) {
+    setState(() {
+      selectedPlacementOption = newOption;
+    });
+  }
+
+  void updateEnableNotch(bool value) {
+    setState(() {
+      enableNotch = value;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    var code = '''
+GSToolTip(
+  content: "Tooltip",
+  distance: 10,
+  style: GSStyle(
+    bg: \$GSColors.backgroundDark100
+  ),
+  placement: $selectedPlacementOption,
+  child: const GSBadge(
+     size: GSBadgeSizes.\$lg,
+     text: GSBadgeText("Hover"),
+  ),
+),
+    ''';
+    return GSCenter(
+      child: CustomGSLayout(
+        title: "ToolTip",
+        style: GSStyle(
+          dark: GSStyle(bg: $GSColors.black),
+        ),
+        body: BaseLayout(
+          code: code,
+          component: Column(
+            children: [
+              GSToolTip(
+                  enableNotch: enableNotch,
+                  distance: 10,
+                  placement: selectedPlacementOption,
+                  style: GSStyle(bg: GSTheme.of(context).background100),
+                  content: 'Tooltip',
+                  child: const GSBadge(
+                    size: GSBadgeSizes.$lg,
+                    text: GSBadgeText("Hover Me"),
+                  )),
+            ],
+          ),
+          controls: Column(
+            mainAxisAlignment: MainAxisAlignment.spaceAround,
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              CustomDropDown(
+                title: "placement",
+                dropdownOptions: dropdownPlacementOptions,
+                selectedOption: selectedPlacementOption,
+                onChanged: updatePlacementSelectedOption,
+              ),
+              const SizedBox(height: 20),
+              CustomToggle(
+                title: "Enable Notch",
+                value: enableNotch,
+                onToggle: updateEnableNotch,
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

example/lib/widgets/storybook/widgets/public.dart

@@ -1,6 +1,6 @@
 import 'package:gluestack_ui_example/widgets/storybook/widgets/header_story.dart';
-import 'package:gluestack_ui_example/widgets/storybook/widgets/slider_story.dart';
 import 'package:gluestack_ui_example/widgets/storybook/widgets/tab_story.dart';
+import 'package:gluestack_ui_example/widgets/storybook/widgets/tooltip_story.dart';
 import 'alert_dialog_story.dart';
 import 'avatar_story.dart';
 import 'badge_story.dart';
@@ -59,13 +59,13 @@ final List<StoryWidget> kStories = [
   ProgressStory(),
   RadioButtonStory(),
   ScrollStory(),
-  SliderStory(),
   SpinnerStory(),
   StackStory(),
   SwitchStory(),
   TextStory(),
   TextareaStory(),
   ToastStory(),
+  ToolTipStory(),
   VStackStory(),
   HeaderStory(),
   ModalBottomSheetStory(),

example/lib/widgets/storybook/widgets/tooltip_story.dart

@@ -0,0 +1,37 @@
+import 'package:gluestack_ui/gluestack_ui.dart';
+import 'base_story_widget.dart';
+import 'package:storybook_flutter/storybook_flutter.dart';
+
+final List<Option<int>> placementsOptions =
+    generateEnumOptions(GSToolTipPlacements.values);
+
+final class ToolTipStory extends StoryWidget {
+  @override
+  Story createStoryWidget() {
+    return Story(
+        name: storyName, builder: (context) => const GSToolTipExample());
+  }
+
+  @override
+  String get routePath => "tooltip-preview";
+
+  @override
+  String get storyName => "Tooltip";
+}
+
+class GSToolTipExample extends StatelessWidget {
+  const GSToolTipExample({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return GSToolTip(
+      distance: 10,
+      content: "Tooltip",
+      placement: GSTooltipPosition.values[context.knobs
+          .options(label: 'Placement', initial: 0, options: placementsOptions)],
+      enableNotch: context.knobs.boolean(label: "enableNotch", initial: false),
+      child:
+          const GSBadge(size: GSBadgeSizes.$md, text: GSBadgeText("Hover Me")),
+    );
+  }
+}

lib/gluestack_ui.dart

@@ -46,4 +46,4 @@ export 'src/widgets/gs_stepper/public.dart';
 export 'src/widgets/gs_tabs/public.dart';
 export 'src/widgets/gs_layout/public.dart';
 export 'src/widgets/gs_header/public.dart';
-export 'src/widgets/gs_slider/public.dart';
+export 'src/widgets/gs_tool_tip/public.dart';