BottomNavigation with tooltip example added

Author: dhavalveera

apps/web/content/docs/components/bottom-navigation.mdx

@@ -18,3 +18,9 @@ Use the default bottom navigation bar example to show a list of menu items as bu
 This example can be used to show a border between the menu items inside the bottom navigation bar.
 
 <Example name="bottomNavigation.withBorder" />
+
+## Example with Tooltip
+
+This example can be used to show a Tooltip on the hover on the menu items.
+
+<Example name="bottomNavigation.withTooltip" />

apps/web/examples/bottomNavigation/bottomNavigation.root.tsx

@@ -7,7 +7,7 @@ import { GiSettingsKnobs, GiWallet } from "react-icons/gi";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
-'use client';
+"use client";
 
 import { BottomNavigation } from "flowbite-react";
 

apps/web/examples/bottomNavigation/bottomNavigation.withBorder.tsx

@@ -7,7 +7,7 @@ import { GiSettingsKnobs, GiWallet } from "react-icons/gi";
 import type { CodeData } from "~/components/code-demo";
 
 const code = `
-'use client';
+"use client";
 
 import { BottomNavigation } from "flowbite-react";
 

apps/web/examples/bottomNavigation/bottomNavigation.withTooltip.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { BottomNavigation } from "flowbite-react";
+import { AiFillHome } from "react-icons/ai";
+import { CgProfile } from "react-icons/cg";
+import { GiSettingsKnobs, GiWallet } from "react-icons/gi";
+import type { CodeData } from "~/components/code-demo";
+
+const code = `
+"use client";
+
+import { BottomNavigation } from "flowbite-react";
+
+function Component() {
+  return (
+    <BottomNavigation>
+      <BottomNavigation.Item label="Home" icon={AiFillHome} showTooltip />
+      <BottomNavigation.Item label="Wallet" icon={GiWallet} showTooltip />
+      <BottomNavigation.Item label="Settings" icon={GiSettingsKnobs} showTooltip />
+      <BottomNavigation.Item label="Profile" icon={CgProfile} showTooltip />
+    </BottomNavigation>
+  )
+}
+`;
+
+function Component() {
+  return (
+    <div className="relative bottom-0 h-20">
+      <BottomNavigation
+        theme={{
+          root: {
+            base: "absolute bottom-0 left-0 z-50 h-16 w-full border-t border-gray-200 bg-white dark:border-gray-600 dark:bg-gray-700",
+          },
+        }}
+      >
+        <BottomNavigation.Item label="Home" icon={AiFillHome} showTooltip />
+        <BottomNavigation.Item label="Wallet" icon={GiWallet} showTooltip />
+        <BottomNavigation.Item label="Settings" icon={GiSettingsKnobs} showTooltip />
+        <BottomNavigation.Item label="Profile" icon={CgProfile} showTooltip />
+      </BottomNavigation>
+    </div>
+  );
+}
+
+export const withTooltip: CodeData = {
+  type: "single",
+  code: [
+    {
+      fileName: "client",
+      language: "tsx",
+      code,
+    },
+  ],
+  githubSlug: "bottomNavigation/bottomNavigation.withBorder.tsx",
+  component: <Component />,
+};

apps/web/examples/bottomNavigation/index.ts

@@ -1,2 +1,3 @@
 export { root } from "./bottomNavigation.root";
 export { withBorder } from "./bottomNavigation.withBorder";
+export { withTooltip } from "./bottomNavigation.withTooltip";