Add a custom theme for Tooltip

dapp/src/components/Overview/PositionDetails.tsx

@@ -20,7 +20,7 @@ export default function PositionDetails(props: CardProps) {
         <HStack justifyContent="space-between">
           <Text>Your positions</Text>
           {/* TODO: Add correct text for tooltip */}
-          <Tooltip label="Template">
+          <Tooltip label="Template" placement="top">
             <Icon as={Info} color="grey.700" />
           </Tooltip>
         </HStack>

dapp/src/theme/Tooltip.ts

@@ -0,0 +1,23 @@
+import {
+  ComponentSingleStyleConfig,
+  Tooltip as ChakraTooltip,
+  cssVar,
+} from "@chakra-ui/react"
+
+// Currently, there is no possibility to set all tooltips with hasArrow by defaultProps.
+// Let's override the defaultProps as follows.
+ChakraTooltip.defaultProps = { ...ChakraTooltip.defaultProps, hasArrow: true }
+
+// To make the arrow the same color as the background, the css variable needs to be set correctly.
+// More info: https://github.com/chakra-ui/chakra-ui/issues/4695#issuecomment-991023319
+const $arrowBg = cssVar("popper-arrow-bg")
+
+const Tooltip: ComponentSingleStyleConfig = {
+  baseStyle: {
+    borderRadius: "md",
+    bg: "grey.700",
+    [$arrowBg.variable]: "colors.grey.700",
+  },
+}
+
+export default Tooltip

dapp/src/theme/index.ts

@@ -1,13 +1,10 @@
-import { StyleFunctionProps, Tooltip, extendTheme } from "@chakra-ui/react"
+import { StyleFunctionProps, extendTheme } from "@chakra-ui/react"
 import { mode } from "@chakra-ui/theme-tools"
 import Button from "./Button"
 import Switch from "./Switch"
 import { colors, fontSizes, fontWeights, lineHeights } from "./utils"
 import Card from "./Card"
-
-// Currently, there is no possibility to set all tooltips with hasArrow by defaultProps.
-// Let's override the defaultProps as follows.
-Tooltip.defaultProps = { ...Tooltip.defaultProps, hasArrow: true }
+import Tooltip from "./Tooltip"
 
 const defaultTheme = {
   colors,
@@ -27,6 +24,7 @@ const defaultTheme = {
     Button,
     Switch,
     Card,
+    Tooltip,
   },
 }