diff --git a/package.json b/package.json
index d653ed5..e4dfe90 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@mui/material": "^5.11.14",
     "@mui/styled-engine-sc": "^5.11.11",
     "@radix-ui/react-select": "^1.2.1",
+    "@radix-ui/react-tooltip": "^1.0.5",
     "@vercel/analytics": "^0.1.11",
     "axios": "^1.3.4",
     "csstype": "^3.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 05f56b5..c4a037e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,6 +16,9 @@ dependencies:
   '@radix-ui/react-select':
     specifier: ^1.2.1
     version: 1.2.1(@types/react@18.0.28)(react-dom@18.2.0)(react@18.2.0)
+  '@radix-ui/react-tooltip':
+    specifier: ^1.0.5
+    version: 1.0.5(@types/react@18.0.28)(react-dom@18.2.0)(react@18.2.0)
   '@vercel/analytics':
     specifier: ^0.1.11
     version: 0.1.11(react@18.2.0)
@@ -966,6 +969,19 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /@radix-ui/react-presence@1.0.0(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.21.0
+      '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0)
+      '@radix-ui/react-use-layout-effect': 1.0.0(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /@radix-ui/react-primitive@1.0.2(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==}
     peerDependencies:
@@ -1022,6 +1038,31 @@ packages:
       react: 18.2.0
     dev: false
 
+  /@radix-ui/react-tooltip@1.0.5(@types/react@18.0.28)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-cDKVcfzyO6PpckZekODJZDe5ZxZ2fCZlzKzTmPhe4mX9qTHRfLcKgqb0OKf22xLwDequ2tVleim+ZYx3rabD5w==}
+    peerDependencies:
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      '@babel/runtime': 7.21.0
+      '@radix-ui/primitive': 1.0.0
+      '@radix-ui/react-compose-refs': 1.0.0(react@18.2.0)
+      '@radix-ui/react-context': 1.0.0(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.3(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.0(react@18.2.0)
+      '@radix-ui/react-popper': 1.1.1(@types/react@18.0.28)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.2(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.0(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.2(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.1(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.0(react@18.2.0)
+      '@radix-ui/react-visually-hidden': 1.0.2(react-dom@18.2.0)(react@18.2.0)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - '@types/react'
+    dev: false
+
   /@radix-ui/react-use-callback-ref@1.0.0(react@18.2.0):
     resolution: {integrity: sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==}
     peerDependencies:
diff --git a/src/components/ConnectionSidebar.tsx b/src/components/ConnectionSidebar.tsx
index ef22c71..04a8042 100644
--- a/src/components/ConnectionSidebar.tsx
+++ b/src/components/ConnectionSidebar.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 import { useConversationStore, useConnectionStore, useLayoutStore, ResponsiveWidth } from "@/store";
 import { Conversation, Connection } from "@/types";
 import Select from "./kit/Select";
+import Tooltip from "./kit/Tooltip";
 import Icon from "./Icon";
 import EngineIcon from "./EngineIcon";
 import LocaleSwitch from "./LocaleSwitch";
@@ -189,23 +190,26 @@ const ConnectionSidebar = () => {
                   <EngineIcon engine={connection.engineType} className="w-auto h-full mx-auto" />
                 </button>
               ))}
-              <button
-                className="tooltip tooltip-right w-10 h-10 mt-4 ml-2 p-2 bg-gray-100 rounded-full text-gray-500 cursor-pointer"
-                data-tip={t("connection.new")}
-                onClick={() => toggleCreateConnectionModal(true)}
-              >
-                <Icon.AiOutlinePlus className="w-auto h-full mx-auto" />
-              </button>
+              <Tooltip title={t("connection.new")} side="right">
+                <button
+                  className="w-10 h-10 mt-4 ml-2 p-2 bg-gray-100 rounded-full text-gray-500 cursor-pointer"
+                  onClick={() => toggleCreateConnectionModal(true)}
+                >
+                  <Icon.AiOutlinePlus className="w-auto h-full mx-auto" />
+                </button>
+              </Tooltip>
             </div>
             <div className="w-full flex flex-col justify-end items-center">
               <LocaleSwitch />
-              <button
-                className="tooltip tooltip-right w-10 h-10 p-1 rounded-full flex flex-row justify-center items-center hover:bg-gray-100"
-                data-tip={t("common.setting")}
-                onClick={() => toggleSettingModal(true)}
-              >
-                <Icon.IoMdSettings className="text-gray-600 w-6 h-auto" />
-              </button>
+              <Tooltip title={t("common.setting")} side="right">
+                <button
+                  className=" w-10 h-10 p-1 rounded-full flex flex-row justify-center items-center hover:bg-gray-100"
+                  data-tip={t("common.setting")}
+                  onClick={() => toggleSettingModal(true)}
+                >
+                  <Icon.IoMdSettings className="text-gray-600 w-6 h-auto" />
+                </button>
+              </Tooltip>
             </div>
           </div>
           <div className="relative p-4 pb-0 w-64 h-full overflow-y-auto flex flex-col justify-start items-start bg-gray-100">
diff --git a/src/components/kit/Tooltip.tsx b/src/components/kit/Tooltip.tsx
new file mode 100644
index 0000000..a384415
--- /dev/null
+++ b/src/components/kit/Tooltip.tsx
@@ -0,0 +1,33 @@
+import * as TooltipUI from "@radix-ui/react-tooltip";
+
+type Side = "top" | "right" | "bottom" | "left";
+
+interface Props {
+  title: string;
+  side: Side;
+  children: React.ReactNode;
+}
+
+const Tooltip = (props: Props) => {
+  const { title, side, children } = props;
+
+  return (
+    <TooltipUI.Provider delayDuration={0} skipDelayDuration={0}>
+      <TooltipUI.Root>
+        <TooltipUI.Trigger asChild>{children}</TooltipUI.Trigger>
+        <TooltipUI.Portal>
+          <TooltipUI.Content
+            className="bg-zinc-800 text-gray-200 dark:bg-black text-sm p-1 px-2 rounded-md z-[99999]"
+            side={side}
+            sideOffset={6}
+          >
+            {title}
+            <TooltipUI.Arrow />
+          </TooltipUI.Content>
+        </TooltipUI.Portal>
+      </TooltipUI.Root>
+    </TooltipUI.Provider>
+  );
+};
+
+export default Tooltip;